레이아웃 만들기 3: 편리한 Flexbox

Flexbox 레이아웃 사용법

<div class="flex-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.flex-container {
  display : flex;
}
.box {
  width : 100px;
  height : 100px;
  background : grey;
  margin : 5px;
}

박스들을 감싸는 부모 요소에게 display: flex를 적용하면 기본적으로 가로정렬이 된다.

Flexbox 세부속성 사용하기

.flex-container {
  display : flex;
  justify-content : center;  /* 좌우정렬 */
  align-items : center;  /* 상하정렬 */
  flex-direction : column; /* 세로정렬 */
  flex-wrap : wrap;  /* 폭이 넘치는 요소 wrap 처리 */
}
.box {
  flex-grow : 2;  /* 폭이 상대적으로 몇배인지 결정 */
}

자주쓰는 속성들이지만 굳이 외울 필요는 없다. 구글에 또 찾아보면 그만이다.

박스 좌측 & 우측정렬 동시에 하는 법

<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
</div>

첫 div 태그는 왼쪽, 가운데 div 태그는 flex-grow 속성 덕분에 다른 것들에 비해 훨씬 커져 좌우로 퍼지게 된다.