배경
inline block 의 문제점을 해결하기 위해 flex-block 을 생각해 냄.
장점
일일히 위치나 간격을 지정해 줄 필요 없이, main axis(주축) 와 cross axis(교차축)를 기준으로 정렬해서 매우 편함.
사용법
- 자식에게 명시하지 않고 부모 엘리먼트에 명시한다. 즉, 적용하고 싶은 block 의 부모엘리먼트에
display: flex;css 를 적용한다. - main axis => 주축은 (수평 horizontal) 이 기본,
justify-content는 main axis를 따라 움직임 - cross-axis => 교차축은 (수직 vertical) 이 기본,
align-items를 설정함.
main axis, cross axis 의 기본값을 변경하려면 ? 즉
justify-content나align-items의 default 를 변경하기 위해서는flex-direction을 수정하면 된다.
flexbox 의 property
flex-wrap: nowrap: 을 통해 wrapping 이 일어나지 않게 할 수 있음.position : fixed는 새로운 layer 를 만듬. 이때 만들어진 layer 의 position default value 는 이전에 작성된 content 의 끝을 기준으로 만들어짐. 하지만 이를 수정할 수 는 있음.(예를 들어 top: 1px, left, bottom, right) 예시와 같이 위치를 수정하면 그에따라 위치가 변경되어 고정이 됨. 기존과 다른 레이어에 적용되기 때문에 고정된 요소 이후에 오는 요소들은 겹쳐짐.
참고
NomadCoder 영상.