1. Flex가 등장한 배경
- 과거엔 Table 태그로 레이아웃을 잡았지만, 여러 모로 좋은 방법이 아니었음.
- position은 지금도 많이 쓰이고 있고, 나쁘지 않은 방법임.
- float은 배우기 어려움.
- 이러한 상황에서 flex가 등장함.
2. 사용법
- flex를 사용할 땐, 반드시 부모, 자식과 같은 두 단계의 태그가 필요함.
- flex를 사용한다고 했을 때, 그 출발점은 부모 요소에
display : flex
를 선언하는 것부터 시작이다.
<container>
<item></item>
<item></item>
</container>
- container에 부여해야 하는 속성과 item에 부여해야 하는 속성이 따로 있다.
- container에 부여해야 하는 속성
- display
- flex-direction
- flex-wrap
- felx-flow
- justify-content
- align-items
- align-content
- item에 부여해야 하는 속성
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
3. Properties
3.1 Properties for the flex container
- flex-direction
- item들을 어떤 축을 기준으로 정렬할지 결정.
- row(기본값), row-reverse, column, column-reverse
- flex-wrap
- 기본값은 nowrap이고 wrap으로 하면, container의 크기보다 item들의 크기의 합이 더 크다면, 줄바꿈이 됨.
- align-items
- container가 display:flex가 되는 순간, item들의 높이는 container와 같아진다.
- 이유 : 왜냐하면, align-items의 기본값이 stretch이기 때문!
- flex-start, flex-end, center, baseline, stretch(기본값)
- justify-content
- align-items가 수직이라면, justify-content는 수평 방향 정렬임.
- flex-start, flex-end, space-between, center, space-around
- align-content
- align-items가 각각의 items를 정렬한다면, align-content는 그룹별 정렬을 해줌(?)
- flex-start, flex-end, center, space-between, space-around, stretch
3.2 Propertyies for the flex item
- align-self
- align-items로 item들이 정렬된 상태에서 특정 item만 따로 정렬하고 싶을 때 사용.
- auto, flex-start, flex-end, center, baseline, stretch
- flex-basis
- flex-grow
- 부모 컨테이너의 flex-grow 속성의 값으로 1을 주면, 부모 컨테이너의 크기를 자식들이 균등하게 나눠가짐.
- 만약 특정 자식 요소의 flex-grow를 부모 컨테이너에서 설정한 것보다 높게 설정하면, 해당 자식 요소만 크기가 달라짐.
- flex-shrink
- 윈도우 창을 줄이는 것에 따라 요소의 크기가 줄어들지 말지를 결정하고, 얼마나 줄어들지도 결정할 수 있음.
- order
4. 참고문서