[CSS] Flex Box 총정리

The Complete CSS Flex Box Tutorial

Flex Box에 대한 총정리 글을 발견했다. 글 하나에 한눈에 볼 수 있도록 깔끔하게 정리가 되어 있어서 시중에 나와있는 CSS 책보다 이 글이 훨씬 낫다.

 

예전에는 반응형페이지를 만들 때 float와 퍼센트 margin 값을 브레이크 포인트마다 조정해야 했는데, flex는 화면크기에 적응해서 스스로 크기와 위치를 조정할 수 있기 때문에 간단하고 유용하다. 아니 간단하다고는 하지만 프로퍼티 종류도 많고 개념을 완벽히 정리하는데는 시간이 걸릴 것 같다.

 

flex는 CSS 속성 중에서 가장 복잡하고 까다롭다. 다른 속성이 평면에 z-index값이 더해진 2차원이라면, flex는 상하좌우에 순서개념까지 더해졌고 레이아웃 틀 자체를 흔들기 때문이다. 하지만 이 보스몹만 잡으면 CSS로 반응형 레이아웃을 컨트롤하는 것은 마스터하게 되는 것이니 이 기회에 완벽히 공부해보자.

 

---

 

1) Direction, Wrap, Flow

.flexBox {
  display: flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: wrap | wrap-reverse;
  flex-flow: ; /* flex-direction과 flex-wrap을 합쳐 쓰는 것 */
}

flex-direction은 좌우 기준점을 지정한다. (좌→우 or 우→좌)

flex-wrap은 요소가 2줄 이상일 때 상하 기준점을 결정한다. (상→하 or 하→상)

flex-flow는 direction과 wrap을 동시에 정의할 수 있는 프로퍼티이다.

 

flex-flow: row wrap (default)

 

flex-flow: row-reverse wrap

 

flex-flow: row wrap-reverse

 

flex-flow: row-reverse wrap-reverse

 

(좌) flex-flow: column wrap / (우) flex-flow: column-reverse wrap

 

2) justify-content

.parent {
 justify-content: flex-start |flex-end |center |space-between |space-around |stretch |space-evenly
}

jusrity-content는 자식요소의 여백을 결정한다.

 

 

flex-direction: row 일때

 

flex-direction: column 일때

 

여기까지가 Flex Box의 기본 개념이다. 나머지는 원본글 참고해서 실습하면서 공부하자!