display: flex

레이아웃 배치에 필수로 쓰이는 속성, display: flex 입니다. float 속성을 사용해도 되지만 여러가지 문제 (반응형,높이값 0 등) 때문에 Flex Layout을 씁니다. 물론, 구버전 브라우저 , IE (인터넷 익스플로러) 지원까지 생각한다면 float 속성을 써도 됩니다.

사용법

매우 간단합니다. 부모 클래스에 display: flex 만 써주면 정렬이 됩니다.

.container{display: flex;}

결과

속성 하나를 사용하여 쉽게 내가 원하는 배치를 할 수 있습니다.

코드

 <div class="container">
   <div class="box"></div>
   <div class="box red"></div>
   <div class="box gr"></div>
   <div class="box be"></div>
 </div>

.container{display: flex;}
.container .box{width: 200px; height: 200px; background-color: #000;}
.container .box.red{background-color: red;}
.container .box.gr{background-color: green;}
.container .box.be{background-color: blue;}

flex와 함께 사용되는 속성

(flex 속성은 자주 쓰이는 것들 위주로 하였습니다.)

align-items

세로축 (Y축) 을 기준으로 배치할 수 있는 속성입니다.

center : 세로축 기준 가운데에 배치 (축약 : aic)
start : 세로축 기준 맨 위에 배치 (축약 : ais)
end : 세로축 기준 맨 아래에 배치 (축약 : aie)

align-items: center 속성을 사용했더니 맨위에 있던 텍스트가 중앙으로 배치되었습니다.

코드

<div class="container">
  <div class="box">
    <span>box</span>
  </div>
  <div class="box red">
    <span>box</span>
  </div>
  <div class="box gr">
    <span>box</span>
  </div>
  <div class="box be">
    <span>box</span>
  </div>
</div>

.container{display: flex;}
.container .box{display: flex; align-items: center; width: 200px; height: 200px; font-size: 26px; color: #fff; 
background-color: #000;}

justify-content

가로축 (X축) 을 기준으로 배치합니다.

center : 가로축 기준 가운데에 배치 (축약 : jcc)
start : 가로축 기준 맨 왼쪽에 배치 (축약 : jcs)
end : 가로축 기준 맨 오른쪽에 배치 (축약: jce)
space-between : 아이템들의 간격을 동일하게 합니다. (축약: jcsb)
space-evenly : 아이템들의 사이,양 끝의 간격을 동일하게 합니다. (축약 : jcsp)

.box와 .container에 각각 justify-content: center 속성을 사용하여 가운데에 배치 하였습니다.

space-between

space-evenly

flex-direction

배치방향을 설정합니다. (display: flex의 기본값은 row입니다.)

column : 세로방향으로 배치
column-reverse : 역순 세로방향으로 배치
row : 가로방향으로 배치
row-reverse : 역순 가로방향으로 배치

.container에 flex-direction: column 을 주게되면 세로로 배치할 수 있습니다.
column-reverse를 주게되면 역순 세로방향이니까, 파란색 - 초록색 - 빨간색 - 검정색 박스 순으로 되겠죠?

gap

display: flex 혹은 display: grid 일 때만 적용되는 속성입니다.
플렉스박스 아이템들의 간격을 설정합니다.

row-gap : 가로방향 간격
column-gap : 세로방향 간격
gap : 세로 + 가로 간격

gap 을 사용하여 가로세로 동시에 간격을 10px씩 주었습니다.
※ 쉬운 설명을 위하여 flex-wrap: wrap 을 사용하였습니다.

gap을 쓰지 않으면 이런 상태가 됩니다.

코드

<div class="container">
  <div class="box">
    <span>box</span>
  </div>
  <div class="box red">
    <span>box</span>
  </div>
  <div class="box gr">
    <span>box</span>
  </div>
  <div class="box be">
    <span>box</span>
  </div>
  <div class="box">
    <span>box</span>
  </div>
  <div class="box red">
    <span>box</span>
  </div>
  <div class="box gr">
    <span>box</span>
  </div>
  <div class="box be">
    <span>box</span>
  </div>
</div>

.container{width: 45%; display: flex; flex-wrap: wrap; gap: 10px;}
.container .box{display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; font-size: 26px; color: #fff; 
background-color: #000;}

flex-wrap

아이템들을 담고있는 컨테이너의 너비 (width) 가 부족할 때, 아이템들의 배치를 정합니다.
(flex-wrap의 기본값은 no-wrap 입니다.)

no-wrap : 컨테이너 너비를 상관하지 않고 배치합니다. (이렇게 되면 아이템들이 밖으로 빠져 나오겠죠?)
wrap : 컨테이너의 너비에 따라 아이템들의 배치를 줄바꿈합니다.
wrap-reverse : 컨테이너의 너비에 따라 아이템들의 배치를 줄바꿈하고, 역순으로 배치합니다.

코드는 gap 속성을 설명할 때와 같은 코드입니다. 아이템들을 가지고있는 컨테이너의 너비가 줄어들면 자동으로 줄바꿈이 되는 flex-wrap: wrap 속성의 특성을 이용하여 .container 의 width값을 45%로 조정하였습니다.

flex

flex 속성은 flex-grow ,flex-shrink ,flex-basis 이 세가지 속성을 축약한 속성이라고 보시면 됩니다.

다른 속성들은 이해를 하고 쓰는데, 유독 flex 속성은 이해가 안되서 저는 이 두가지만 알고 넘어갔습니다.

1. 플렉스박스 아이템들의 width값을 컨테이너 너비에 맞게 조정 (플렉스박스의 빈공간을 없앰)
2. 플렉스박스 아이템에 해당하는 속성이므로, 부모가 아니라 아이템에 flex: 1 을 사용해야 적용됨. 단, 부모가 display: flex 로 되있지 않으면 플렉스 박스 아이템 또한 flex: 1 속성 적용이 안됨.

<div class="container">
  <div class="box">
    <span>box</span>
  </div>
  <div class="box red">
    <span>box</span>
  </div>
  <div class="box gr">
    <span>box</span>
  </div>
  <div class="box be">
    <span>box</span>
  </div>
</div>

위 html 코드에서 부모인 container 가 display: flex 상태여야 자식 클래스인 box도 flex: 1 속성이 적용됩니다.

참고링크 : https://webdir.tistory.com/349

order

아이템들의 순서 배치를 변경하는 속성으로, 숫자의 크기가 작을수록 먼저 배치됩니다.
※ HTML 마크업 순서 자체를 바꾸는게 아닌 시각적인 면에서만 바뀌기 때문에 접근성에 주의하세요.

order: 1 속성을 이용하여 순서 배치가 바뀌었습니다.

코드

<div class="container">
  <div class="box">
    <span>box</span>
  </div>
  <div class="box red">
    <span>box</span>
  </div>
  <div class="box gr">
    <span>box</span>
  </div>
  <div class="box be">
    <span>box</span>
  </div>
  <div class="box">
    <span>box</span>
  </div>
  <div class="box red">
    <span>box</span>
  </div>
  <div class="box gr">
    <span>box</span>
  </div>
  <div class="box be">
    <span>box</span>
  </div>
</div>

.container .box:first-child{order: 1;}
.container .box:nth-of-type(2){order: 1;}

IE 및 구버전 안드로이드 지원

IE8 ~ 11 버전까지 flex 레이아웃을 100%는 아니지만, 접두사 -ms- 를 사용하여 어느정도는 지원하며, 구버전 안드로이드 2.1 ~ 4.3에서는 접두사 -webkit- 를 사용합니다.

IE 및 구버전 안드로이드에서 사용되는 flex 속성

display: flex

display: -webkit-box;
display: -ms-flexbox;

flex-grow

-webkit-box-flex: 1;
-ms-flex: 1;

flex-direction row

-webkit-box-orient: horizontal;
-ms-flex-direction: row;

flex-direction column

-webkit-box-orient: vertical;
-ms-flex-direction: column;

flex-direction column-reverse

 -webkit-box-orient: vertical;
 -webkit-box-direction: reverse;
 -ms-flex-direction: column-reverse;

flex-wrap : nowrap

 -webkit-box-lines: single;
 -ms-flex-wrap: nowrap;

flex-wrap : wrap

-webkit-box-lines: multiple;
-ms-flex-wrap: wrap;

order

 -webkit-box-ordinal-group: 1;
-ms-flex-order: 1;

justify-content : flex-start

-webkit-box-pack: start;
-ms-flex-pack: start;

justify-content : flex-end

-webkit-box-pack: end;
-ms-flex-pack: end;

justify-content : center

-webkit-box-pack: center;
-ms-flex-pack: center;

justify-content : space-between

-webkit-box-pack: justify;
-ms-flex-pack: justify;

align-items : flex-start

 -webkit-box-align: start;
-ms-flex-align: start;

align-items : flex-end

 -webkit-box-align: end;
-ms-flex-align: end;

align-items : center

-webkit-box-align: center;
-ms-flex-align: center;

align-items : baseline

-webkit-box-align: baseline;
-ms-flex-align: baseline;

제 글에 문제가 있다면, 댓글로 피드백을 해주시면 감사하겠습니다 :)