flex
css3 에서 처음 등장한 개념이다. 기존에 불편했던 정렬 등에 대한 문제점을 해결했다.
inline-block(block) 을 사용할 경우 발생하는 정렬 문제가
- 글자크기만큼 박스가 띄어쓰기 되는 문제
- font-size 를 0으로 지정해야 됨
- float 를 사용해서 정렬할 경우 부유하는 문제
- clearfix를 사용함(이 자체가 편법)
flex가 도입되게 된 이유들이다.
container
아이템을 둘러싸고 있는 요소
컨테이너에만 사용되는 속성이 있음
display
flex 컨테이너를 정의하는데 사용
display는 items에 영향을 주는 것이 없음
flex
컨테이너가 블럭 요소처럼 사용됨
inline-flex
컨테이너가 인라인 요소처럼 사용됨
flex-flow
아이템들의 주축을 설정하고 줄 묶음도 설정
flex-direction
주축 방향 설정
- row : 축이 가로(default)
- row-reverse
- column : 축이 수직으로 변경
- column-reverse
flex-wrap
- nowrap : 한 줄에 표시함
- wrap : 여러 줄에 존재하게 함(item 불변)
- 컨테이너 크기에 맞춰서 item 사이즈가 바뀌지 않고, 아래쪽으로 줄바꿈되게 됨.
- wrap-reverse
justify-content
주 축의 정렬 방법을 설정
flex-start
시작점으로 정렬
center
가운데 정렬
flex-end
space-between
처음을 제외하고 내부에 동일한 간격을 둠
space-around
처음을 포함해 모든 요소에 동일한 간격을 둠
align-content
교차축의 정렬 방법을 설정
flex-wrap 속성을 통해 items가 2줄 이상이고 여백이 있을 경우에만 사용이 가능
만약 한 줄일 경우 align-items 사용
stretch
교차 축의 넓이에 맞추기 위해 자동으로 늘어남
align-items
두 줄 이상이 될 경우 align-content가 우선되게 되므로 주의해야 함
교차축의 정렬 방법을 설정함
items
컨테이너 내의 요소
아이템에만 사용되는 속성이 있음
order
아이템의 순서를 결정
숫자가 클 수록 순서가 밀림
기본값 0
flex
flex-grow, flex-shrink, flex-basis 의 단축 속성
flex-grow
아이템의 증가 너비 비율을 설정
전체 너비에 대해서 각자 갖고 있는 값 만큼의 비율로 너비를 갖게 됨
가변 컨테이너에 경우, 비율에 맞게 item 크기를 유지할 수 있는 것이 장점
flex-shrink
줄어드는 너비의 비율을 설정
아이템이 가변 너비가 아니거나 값이 0 일 경우 효과 없음
기준 width나 height(px) 가 있고, 특정 값만큼 줄어들었을 경우, 그 px단위를 flex-shrink 비율만큼 줄어들게 됨.
flex-basis
flex 요소가 가지고 있는 가장 기본적인 너비나 높이
flex-basis를 제외하고 나머지 여백을 가지고 flex-grow 나 shrink 비율을 결정하게 됨.
align-self
교차 축에서 개별 item의 정렬 방법을 설정
일부 아이템만 다르게 적용하고 싶다면 item에 해당 속성을 줄 수 있음
align-items 보다 우선하게 됨
