[CSS] flex

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

오늘은 CSS에서 자주 사용되는 flex에 대해 알아보도록 하겠습니다.

 

 

 

flex

display속성의 값을 flex로 설정하게 되면, 안드로이드에서 사용하는 LinearLayout과 동일하게 동작합니다.

플렉스와 관련된 속성들은 container에 대한 속성과 item에 대한 속성으로 나뉩니다. (볼드체로 표시한 속성은 다른 속성의 축약형 속성입니다.)

 

container용 속성	item용 속성
display	order
flex-direction	flex-grow
flex-wrap	flex-shrink
flex-flow	flex-basis
justify-content	flex
align-items	align-self
align-content

 

container에 flex속성을 설정하는 경우, item들(1차 자식들)은 flex item이 되며, block요소가 아니더라도 width와 height속성을 이용해 크기를 지정할 수 있습니다. (물론 계산된 display속성은 그대로이며, 계산된 flex속성은 없습니다.)

 

 

같이 사용하는 속성들

flex-direction

값	설명
row	수평으로, 왼쪽에서 오른쪽으로 배치합니다.
row-reverse	수평으로, 오른쪽에서 왼쪽으로 배치합니다.
column	수직으로, 위쪽에서 아래쪽으로 배치합니다.
column-reverse	수직으로, 아래쪽에서 위쪽으로 배치합니다.

flex item 요소들을 어떻게 배치할 것인지 정의합니다.

 

flex-wrap

값	설명
nowrap	모든 요소들의 width를 무시하고, 한 줄에 배치합니다.
wrap	요소들을 지정된 flex-direction방향을 따라서 여러줄에 배치합니다.
wrap-reverse	요소들을 지정된 flex-direction과 반대방향을 따라서 여러줄에 배치합니다.

flex item 요소들을 한줄에 배치할 것인지, 아닌지 정의합니다.

nowrap과 wrap-reverse의 차이는 다음 사진을 참고해주세요.

wrap

nowrap

https://www.geeksforgeeks.org/css-flex-wrap-property/#targetText=flex%2Dwrap%3A%20nowrap%7Cwrap,according%20to%20flex%20item%20width.

 

flex-flow

flex-direction과 flex-wrap이 같이 사용되는 경우가 많기 때문에, 각각의 값을 같이 입력받는 속성입니다.

첫번째 인자는 flex-direction, 두번째 인자는 flex-wrap입니다.

 

justify-content

값	설명
flex-start	컨테이너의 시작지점부터 배치합니다.
flex-end	컨테이너의 끝지점부터 배치합니다.
center	컨테이너의 중앙에 요소간 간격 없이 배치합니다.
space-between	컨테이너의 시작지점과 끝지점에 한 요소씩 배치 후, 나머지 요소간 동일한 간격을 두고 배치합니다.
space-around	컨테이너의 시작지점, 끝지점, 모든 요소간 간격이 동일하도록 배치합니다.

flex item 요소들을 주축선상에서 어떻게 배치할 것인지 정의합니다.

값별로 유의미한 차이를 두고자 한다면, 주축상 길이를 지정해줘야 합니다.  예를 들어 flex-direction이 column, height가 설정되지 않은 상태에서는 justify-content를 설정해도 변화가 없습니다.

align-items

값	설명
flex-start	컨테이너의 시작지점부터 배치합니다.
flex-end	컨테이너의 끝지점부터 배치합니다.
center	컨테이너의 중앙에 요소간 간격 없이 배치합니다.
baseline	컨테이너의 시작지점부터 배치합니다. 단, 각 요소들의 크기를 고려합니다.
stretch	컨테이너의 크기에 맞춰 늘려 배치합니다.

flex item 요소들을 교차축상에서 어떻게 배치할 것인지 정의합니다.

flex-start와 baseline의 차이점은 다음 사진과 링크를 참고해주세요.

 

flex-start

basline

https://stackoverflow.com/questions/34606879/whats-the-difference-between-flex-start-and-baseline

 

align-content

값	설명
flex-start	컨테이너의 시작지점부터 배치합니다.
flex-end	컨테이너의 끝지점부터 배치합니다.
center	컨테이너의 중앙에 요소간 간격 없이 배치합니다.
baseline	컨테이너의 시작지점부터 배치합니다. 단, 각 요소들의 크기를 고려합니다.
stretch	컨테이너의 크기에 맞춰 늘려 배치합니다.

align-item과 달리, 줄 사이의 간격을 정의합니다.

따라서, 한 줄만 있는 경우 해당 속성값을 설정해도 효과가 나타나지 않습니다.

 

order

flex item 요소들에 적용하는 속성입니다.

각 요소간 순서를 정의하며, 기본값은 0입니다.

 

flex-grow

flex item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.

만약 형제 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다.

하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

각 flex item 요소들의 flex-grow 값들이 $g_{1}, g_{2}, ...$이며, 모든 flex item 요소들의 flex-grow 값들의 합이 $s$일 때, 각 요소들이 가질 수 있는 공간의 크기는 $\frac{g_{1}}{s}, \frac{g_{2}}{s}, ...$입니다. 즉, 값이 클 수록 더 넓은 공간을 차지할 수 있습니다.

기본값은 0입니다.

 

flex-shrink

만약 flex item 요소의 크기가 flex container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.

저의 수학적 능력이 부족하여 수식으로는 표현하기가 어렵습니다만.. 값이 클 수록 더 적은 공간을 차지합니다.

기본값은 1입니다.

 

flex-basis

flex item 요소의 초기 크기를 지정합니다.

기본값은 auto입니다.

 

flex

flex-grow, flex-shrink, flex-basis의 축약 속성입니다.

인자가 한 개, 두 개, 세 개 일때 각각 써야하는 속성의 순서와 종류가 매우 다르기 때문에, 왠만하면 3개짜리 인자를 사용하시는게 편합니다.

인자가 세 개 인 경우에는 인자의 순서는 flex-grow, flex-shrink, flex-basis입니다.

당연히 기본값은 0 1 auto입니다.

 

align-self

값	설명
flex-start	컨테이너의 시작지점부터 배치합니다.
flex-end	컨테이너의 끝지점부터 배치합니다.
center	컨테이너의 중앙에 요소간 간격 없이 배치합니다.
baseline	컨테이너의 시작지점부터 배치합니다. 단, 각 요소들의 크기를 고려합니다.
stretch	컨테이너의 크기에 맞춰 늘려 배치합니다.

flex 컨테이너의 자식 요소들에 적용하는 속성입니다.

특정 요소에 개별적으로 설정할 수 있으며, 부모의 align-items속성을 무시합니다.

 

 

 

참고

https://flexboxfroggy.com/#ko

Flexbox Froggy

https://developer.mozilla.org/ko/docs/Web/CSS/flex

flex

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Flexbox%EC%9D%98_%EA%B8%B0%EB%B3%B8_%EA%B0%9C%EB%85%90

flexbox의 기본 개념

https://www.inflearn.com/course/css-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%EC%A7%80/

CSS 기본부터 활용까지 - 인프런