Flex and Flex-Item

joonyg·2021년 11월 4일

HTML&&CSS

목록 보기

2/8

Flex란 요소들을 웹 페이지에 배치시키위해 탄생한 기능이다.

기본적으로 Flex는 container와 item들로 구성되어 동작한다.

Flex-Wrap : item들이 container의 1줄 영역에서 넘치는 것을 대비해 여러줄에 item을 배치할지 결정하는 property
- Flex Item은 기본적으로 container내 1줄 안에 들어가도록 flex-shrink가 적용되어 크기가 결정
- 기본값은 no-wrap으로 item들이 1줄에 다 들어가도록 정렬된다.

Main axis: Item을 정렬하는 데 있어서 기준이 되는 방향으로 flex-direction에 따라 결정된다.

justify-content	align-content	align-items
주축으로 item들을 정렬하는 property	여러 줄에 대해 item들을 교차축으로 정렬하는 property로 wrap property를 설정해야 동작!1	1줄에 대해 교차축으로 item들을 정렬하는 property

Flex는 주로 수평정렬에 쓰이기에 item속성에 소홀해 질 수 있지만 item 속성도 layout만큼이나 중요하다!

Flex-item의 초기 속성은 flex: 0 1 auto

	flex-grow	flex-shrink	flex-basis
default value	0	1	Auto
visible actions	브라우저 크기가 커짐에 반응 X	브라우저 크기가 작아짐에 반응 O	일반 width처럼 동작하지만 inline이 된 것처럼 줄바꿈이 일어나지 않음
실제 행동	container 내부의 여백을 차지하도록 item이 커지지 않음	Container < item일 때, item을 축소 O	width값 ?? auto와 같이 동작

Flex-grow : item이 container에서 남은 영역에 대해 차지하는 정도/비율을 지정하는 property
- width = container% 꼴로 item에 width를 할당하는 것이 아님에 주의!
Flex-shirnk : container의 영역보다 item의 크기가 커진 경우 overflow 하지 않도록 해당 item의 크기를 축소하는 property로 해당 비율에 따라 item 크기의 줄어드는 정도가 결정된다.

grow와 shrink는 크기 자체가 아니라 비율을 설정한 것!!
Flex-basis : Flex Item의 크기를 결정하는 속성으로 width와 비슷하게 동작한다.
- Priority : flex-basis -> width -> content
- flex-basis의 크기는 flex-direction에 따른 값!! -> direction = col이 되면 width가 아닌 height가 flex-basis의 할당값을 가져간다.

1) Flex로 설정한 경우 초기의 item들은 위처럼 같은 column으로 정렬되지 않는 상태

flex: 0 1 auto 이기에 item들은 content size에 따라 공간을 차지한다.
각 요소들이 block level이지만 container 1줄의 크기를 모두 차지 않는 건 flex가 item의 content size (정확히는 max-content를 참고한다) 에 따라 영역을 할당하고 flex-shrink를 적용시키기 때문이다.

각 요소들에 flex-shirnk가 적용되어 위 그림과 같이 item들의 실제 크기를 계산 및 할당한다.
Flex Item들이 같은 column width를 가지게 하는 방법으로는 크게 2가지가 존재.
1. Item마다 flex: 1 선언
2. flex_container > * { flex-basis: 100% }

< 다른 example >

.child { flex: 1 }
.child:last-child { flex: 3; background-color: green;  }

flex-grow: 3이 green (3rd) 적용이 되어 있지만 2nd column의 content size 때문에 flex-grow가 정상적으로 작동되지 않는 것 처럼 보인다.
하지만 flex-grow는 container전체에 대한 item의 비율을 할당하는 것이 아니라 남은 영역에 따른 비율을 할당하는 것이므로 2nd-child가 차지하는 content 크기 때문에 위와 같은 결과가 나온 것이다.

Width는 element의 너비를 지정하는 속성으로 Flex-basis도 기본적으로는 width와 똑같이 동작한다.
정확히 flex-basis는 element의 너비가 아니라 flex-direction에 따른 주축의 너비를 설정하는 것!!
- direction: column이 되면 element의 높이가 flex-basis로 설정된 값으로 변경되는 것을 볼 수 있다.
다만, Height property에 대해서는 조금 다르게 동작한다.
- Height property는 flex-shrink에 따라 정상적으로 동작하지 않는다. 따라서 flex-direction이 column인 경우 flex-basis를 사용해 flex-shrink에 따라 동작할 수 있도록 하는 것이 바람직하다.

flex-grow	flex-shrink	flex-basis
1	1	0 (not auto!!)

Flex-grow가 1이 되었기에 컨테이너 내부에서 1만큼의 너비를 할당 받는 것을 의미한다.
flex-shrink가 1은 default값을 가짐.
flex-basis가 0이 되었기에 실제로 item의 크기는 0이다! (Default인 auto가 아님에 주의!). 하지만 flex-grow로 인해 할당된 너비만큼 item의 크기를 증가시킨다! (아래 사진 참조)