[CSS] Flex(Flexible box) 사용 가이드

 

본 게시물은
NHN 최민호 선임님과 김부승 전임님의  HTML/CSS 기초 강의와
MDN Web Docs를 참고하여 작성하였습니다.

 

---

Flexible box란?

flexible box는 아이템간 공간 배분과 정렬 기능을 제공하기 위한 기능으로서, HTML5의 새로운 display 속성이다. 

성능면에서도 이전 레이아웃 모델과 비교해서 렌더링 시간이 빨라졌다.

주의할 점은 부모와 자식 모두에게 속성을 부여해야 적용된다.

display: flex

 

flex-direction: 중심축 설정

flexbox의 가장 강력한 기능은 수직(column, 위-아래)과 수평(row, 좌-우) 방향으로의 자유로운 정렬이다.

정렬 방향은   flex-direction  속성을 이용해 정렬될 방향으로 중심축을 설정할 수 있다. 

flex-direction: row	/* defalut */
flex-direction: column

row-reverse와 column-reverse를 통해 정렬의 시작 방향을 반대로 할 수 있다.

예를 들어 flex-direction: row가 1, 2, 3, 4 순서로 아이템이 정렬 될때

lex-direction: row-reverse는 4, 3, 2, 1 순서로 정렬된다.

flex-direction: row-reverse
flex-direction: column-reverse

 

 

flex: 공간 분배

flex 속성으로  flex-grow, flex-shrink, flex-basis  세가지 속성을 설정할 수 있다. 

flex: 2 1 0

하나의 정숫값만 사용할 경우 grow의 속성만 지정하고 나머지는 1과 0으로 고정된다.

flex: 2 /* flex: 2 1 0 와 동일 */
flex: 4 /* flex: 4 1 0 와 동일 */

이 경우에는 각각의 항목이 남은 공간을 어떤 비율로 차지하는가. 라고 생각하면 쉽다. 

 

 flex:none 은 아이템에 원래 지정된 영역만 차지한다. 

flex: none /* flex: 0 0 auto 와 동일 */

 

flex-grow, shrink, basis에 대한 설명은 아래 더보기를 통해 볼 수 있다. 

flex-grow: 아이템 확장

flex-grow는 확장에 관련된 속성으로, 
속성값이 0이면 컨테이너가 커져도 아이템의 크기는 원래대로 유지된다.
속성값이 1이상일 경우 아이템의 공간도 컨테이너와 함께 늘어난다. 

flex-shrink: 아이템 축소

flex-shrink는 grow속성과 반대로 축소와 관련되어 있다.
속성값이 0이면 컨테이너가 작아져도 아이템의 크기가 유지된다.
속성값이 1이상이면 작아질때 컨테이너와 함께 작아진다.  

flex-basis: 아이템 기본 크기

flex-basis는 아이템의 크기를 정의하는 것으로, 기본값은 auto다.
auto는 아이템에 지정되어 있는 크기를 확인하고,
따로 크기를 지정하지 않았다면 콘텐츠의 크기를 기준으로 결정한다. 

 

 

justify-content: 중심축 정렬

flex-direction으로 지정한 중심축과 같은 방향의 아이템의 정렬을 결정한다.

justify-content: flex-start /* 중심축 시작 방향으로 정렬 */
justify-content: center /* 가운데 정렬 */
justify-content: flex-end /* 중심축이 끝나는 방향으로 정렬 */

 

 

align-items: flex-direction과 교차축 정렬

flex-direction으로 지정한 중심축과 수직인 교차축 방향의 아이템의 정렬을 결정한다.

align-items: flex-start /* 교차축 시작 방향으로 정렬 */
align-items: center /* 가운데 정렬 */
align-items: flex-end /* 교차축이 끝나는 방향으로 정렬 */

 

flex-wrap: 줄바꿈 설정

아이템을 한줄로 보여줄지, 크기에 맞춰 줄바꿈이 될지 지정한다.

flex-wrap: wrap /* 줄바꿈 허용 */
flex-wrap: nowrap /* 한줄 표시 */
flex-wrap: wrap-reverse /* 줄바꿈 허용, 순서 역방향 */

 

 

 

---

 

 

HTML & CSS 강의에서 제일 흥미로웠던 Flexible box에 대하여 정리해봤다.

프론트를 아주 살짝 배웠었지만, Flex는 처음 사용해봐서 제일 재밌었던 것 같다.

CSS를 짜면서 맘대로 정렬이 되지 않아서 화가 났던 적이 많았는데...

Flex로 조금 나아지지 않을까 기대해본다🥰