FLEX 속성정리

CSS할 때 가장 많이 사용하고 지내는 flex에 대해 알아보자.

flex : * * *

[ flex: 1 1 100px ]
이 속성은 위 오른쪽 아래 왼쪽이 아닌 아래와 같은 속성으로 이해하면 된다.
flex : flex-grow / flex-shrink / flex-basis

flex-grow

• 할당 가능한 공간의 정도를 설정
• 형제 아이템들이 모두 동일한 값을 가져 동일한 공간으로 설정됨
• 형제 아이템들이 다른 flex-grow값을 갖게 되면 그 부분을 제외하고 나누어짐

ex)
flex-grow : 1 (정해진 공간 내에서 1:1 비율을 유지)

어느 한 형제만 2를 줬을 때 (nth-child 사용)
flex-grow :2

이미지상 비율은 안맞지만 대충 이렇게 이해할 수 있다.
첫번째 형제만 flex-grow:2를 주면 전체를 3으로 나눠 2를 차지하는 공간을 첫번째 형제가 갖고 두번째, 세번째 형제는 남은 공간을 1:1로 나눠 갖게 된다.

flex-shrink

• 아이템의 크기가 부모보다 클 때 사용
• 설정된 값에 따라 크기가 축소됨

ex)
flex-shrink: 0
축소되지 않고 부모에서 벗어나서 크기를 갖게 함

flex-shrink: 2
부모 안에서 2배 작은 크기를 갖게 함

flex-basis

• 아이템의 초기 크기를 설정
• width나 height값보다 flex-basis가 우선으로 적용됨
• 상하 정렬시 height값으로 적용되며 좌우 정렬 시 width값으로 적용됨

flex-direction

• 방향을 설정하는 속성
• row / columm / row-reverse / columm-reverse 가 있음
• 당연한 말이지만 reverse가 붙는 속성만 역순으로 배치됨

justify-content

• 메인 축에 대한 정렬
• flex-start(첫정렬) / flex-end(끝쪽정렬) / center(가운데정렬) / space-between(아이템간 일정하게 양끝 정렬) / space-around(아이템간 일정하고 끝쪽 아이템과 부모의 간격을 아이템간의 절반을 갖는 정렬) 가 있음

align-items

• 교차하는 축에 대한 정렬
• flex-start(첫정렬) / flex-end(끝쪽정렬) / center(가운데정렬) / space-between(아이템간 일정하게 양끝 정렬) / space-around(아이템간 일정하고 끝쪽 아이템과 부모의 간격을 아이템간의 절반을 갖는 정렬) 가 있음

자주 쓰는 속성이지만 가끔가다 헷갈릴 때가 있어서 적어놓고 다시 공부해봤습니다 :)

다들 오늘도 화이팅!