플렉스 박스 이해하기 및 실습 (Flex-Box Basic)

July 28th 2018

플렉스 박스 개념 이해하기 (Flexbox Basic)

주요 목차 - 플렉스박스 기본 개념 - 플렉스박스(flexbox) 주요 속성 - 플렉스박스(flexbox) 주요 속성 실습

플렉스박스(Flex-box)란 플렉스 박스를 아직 마음껏 사용해 보진 않았지만, 향후 작업 시 시간도 절약할 수 있고 좀 더 쉽게 웹페이지 제작을 할 수 있을 것 같습니다. 그동안 사용했던 grid.css파일은 sass로 각 grid별 width와 사이 간격을 계산해서 미리 만들어 놓았습니다. 이 방법을 먼저 알고 있어야 하겠지만, flex-box를 이용하면 반응형 디자인 작업을 더 빠르고 쉽게 할 수 있습니다.

플렉스박스를 사용하면 html 요소를 매우 쉽게 배치할 수 있고, 순서와 사이즈, column 방향 등을 dimension 계산 없이 손쉽게 배치할 수 있습니다. 그리고 기존의 float 속성보다 간편하고, 더 적은 코드로 html 요소를 조작할 수 있습니다.

/* 기존에 sass로 만들어 놓았던 grid.css 파일 일부 */
.col-1-of-2 {
  width: calc((100% - #{$gutter-horizontal}) / 2);
}
.col-1-of-3 {
  width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
}
.col-2-of-3 {
  width: calc(2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal});
}
.col-1-of-4 {
  width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
}

바쁜 우리다 보니 글보다 실제 보면서 속성을 한 번씩 조정해 보는 것이 빠르게 익힐 수 있는 방법입니다. (Learn by doing!!)

아래 codepen link로 들어가 큰 화면에서 flex box 연습을 해보아요. 결제를 하면 이곳에서도 코드 수정이 가능하지만...뭐 큰 화면으로 연습을 하는 것이 더 좋을 수도 있을 것 같습니다..;; :)

플렉스박스(flexbox) 주요 속성 flex-box-basic by http://codingheroes.io/

기본적으로 주요 속성은 위와 같습니다. 연습을 위한 준비물은 flex로 설정할 container와 그 안의 flex-item으로 설정할 child-element입니다. 위의 표는 제가 udemy에서 들은 강의의 자료인데, 참고하면 도움이 될 것 같아 캡쳐 했습니다. 강의도 좋으니 시간 있으신 분은 들어 보시면 좋을 것 같습니다.

플렉스박스(flexbox) 주요 속성 실습

See the Pen Flexbox Fundamental by CHANWHE KIM (@CHANWHE_KIM) on CodePen.

코드펜 링크에 들어 갔으면, 이 포스팅 창을 옆에 놓고, 코드펜의 container 요소의 display 속성을 flex로 변경해 보세요!!
container 요소의 flex-direction 속성을 row-reverse, column, column-reverse로 변경하며 눈으로 익혀봅시다. row가 default 값입니다.
다음으로 container의 justify-content 속성을 변경해 가며 자식요소인 item들을 정렬할 수 있습니다! 동일한 효과를 float속성으로 구현하려면 얼마나 복잡해질지 상상하면, 감사한 마음을 갖게 됩니다.
다음으로는 container의 align-items 입니다. justify-content가 내부 grid를 횡 방향에서 정령하는 것이면, align-items는 종 방향에서 정렬을 할 수 있습니다. 한 줄에 있는 모든 아이템(grid)가 같은 높이면 해당 기능을 볼 수 없으니, 아이템 중 한 개의 높이를 수정해 주세요. align-items의 기능을 보기 위해서, i2 클래스의 height를 잠시 200px으로 조정해 봅시다.
align-items의 속성을 조정해 가며 기능을 확인해 보세요. default값은 stretch 입니다. baseline 속성은 글자의 밑면을 따라 정렬이 됩니다. 글자 크기가 다를때 정렬하기 좋을 것 같습니다.

Handmade with .