Flexbox

[ flex container ]

 

그냥 div 태그 같은 display: block; 속성이 할당된 태그는 width 를 지정해도 요소 자체는 전부 100%의 width 값을 가지게 되지만, 해당 div 들이 display 값이 flex인 컨테이너 안에 들어있다면, 모두 지정된 width 값을 가진 블록 아이템이 되어 정렬됩니다.

 

float 과의 차이점은, 문서 흐름에서 벋어나지 않기 때문에, 플렉스 속성이 지정된 상위 태그의 높이와 너비는 안의 자식 요소들에 의해 결정된다는 것입니다.

 

[ flex-grow ]

 

flex-grow 는 flex container 안의 아이템들에 지정하는 것이며, 부모 태그에서 채워지지 못한 남은 width 들을 해당 아이템이 채우게 됩니다. 1 부터 수치를 매길 수 있는데, 이 수치는 비율을 의미하며 flex-grow: 2가 할당된 요소는 flex-grow: 1이 할당된 아이템보다 2배의 비율로 남은 공간을 차지합니다.

 

[ flex-shrink ]

 

flex-shrink 는 grow와 마찬가지로 flex container 안의 아이템들에 할당되는 것이며, 스크린 사이즈(브라우저) 가 줄어들어 요소가 안 보이게 되는 것을 방지하기 위해서 화면 사이즈가 줄어듦에 따라 요소 사이즈도 줄어들도록 만들어 줍니다. 속성의 값으로 할당되는 것은 마찬가지로 수치이며, 수치가 높을 수록 더 높은 비율로 줄어듭니다.

 

주의! 만약 flex-shrink 속성이 할당된 요소에 min-width 속성이 할당되어 있다면 그 값 아래로는 절대 shrink되지 않습니다.

 

 

[ flex wrapper ]

 

화면 크기가 줄어들었을 때 단순히 요소의 크기가 줄어드는게 아니라, 아래로 wrap 되도록 만들고 싶다면 flex-wrap: wrap 속성을 부여해주도록 합니다.

 

[ flex basis ]

 

플렉스의 shrink 기능도, 요소가 가지고 있는 min-width 을 넘보면서까지 요소의 너비를 축소시키지 못합니다. 그러면 줄어들지 않은 요소 때문에 수평 스크롤바가 만들어지는데, 이는 반응형 웹에 적합하지 않습니다. 그럴 땐 flex-basis: 라는 속성으로 min-width 속성을 대신해주도록 합니다. 그러면 min-width 값을 가지되, 화면이 줄어들어 요소 크기도 같이 줄어들 필요가 생기면, 같이 줄어들도록 만들 수 있습니다.

 

grow, shrink, basis 이 셋을 압축해서 설정할 수 있는 속성으로 flex 속성이 있습니다 flex: grow값 shrink값 basis값을 전달하면 한꺼번에 정할 수 있습니다.

 

 

[ justify-content ]

 

플렉스 컨테이너의 속성으로 justify-content 를 부여하면, 컨테이너 안의 아이템들의 정렬을 간편하게 설정할 수 있습니다. 주로 사용되는 속성들의 목록은 아래와 같습니다.

 

center

flex-end

flex-start(기본값)

space-around

space-between

 

 

[ nested flex ]

 

플렉스 컨테이너 위에 플렉스 컨테이너를 만들 수 있습니다. 들어간 플렉스 컨테이너들은 상위 플렉스 컨테이너의 아이템으로 작용해서, 정렬하거나 조작할 수 있습니다.

 

 

[ Axis ]

 

플렉스 컨테이너의 아이템 정렬 방향의 기본값은 수평입니다(row) 하지만, 아이템을 수직(column)으로 배열하고 싶다면 flex-flow: column 속성을 부여해주면 됩니다. 이때, flex-basis 의 값은 column 아이템의 높이가 됩니다. 또한 column 으로 flow가 바뀌게 되면, row와는 다르게 아이템들의 너비가 따로 정해져 있는 것이 아니라면, 모든 아이템들이 각각 100%의 너비를 차지하게 됩니다.

 

이 flow에 따라서 적용이 다르게 되는 속성들도 있습니다. justify-content 속성은 flow가 row 일 때 수평적으로 아이템을 정렬하고, column일 때는 수직으로 정합니다. column 일때는 컨테이너의 높이가 아이템들의 너비보다 커야 이런 정렬이 적용됩니다.

 

 

[ Align Items on cross axis ]

 

 

flex-flow에 따라 main axis와 cross axis가 서로 바뀌게 되고, main axis에 따라 아이템 정렬을 조작하는 것이 justify-content 속성입니다. 그리고 cross-axis 방향에 따라 아이템들을 정렬하는 것이 item-align 속성입니다.

 

 

[ order ]

 

플렉스 컴포넌트 안의 아이템들의 정렬 순서를 정하고 싶다면 아이템들의 CSS 속성으로 order 속성을 주면 됩니다. 수치가 높을 수록 뒤로 가게 됩니다.