ayko

div 요소들인 box는 기본적으로 세로 정렬이 된다.

가로 정렬을 하고 싶을 때는 display:flex를 사용하면 됩니다.

반응형에 필수로 사용된다 (예시로 PC 가로 버전이고 MO 세로 버전으로 할 때 사용한다)

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

.flex-container {
  display : flex;
}
.box {
  width : 400px;
  height : 200px;
  background : #ddd;
  margin : 5px;
}

Flexbox 세부 속성

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

box 좌측 & 우측 정렬 동시에 하는 방법

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

align-content 상하배치를 조절하는 속성 (justify-content의 세로버전)

flex-start /* 시작 부분에 플렉스 아이템 정렬 */
flex-end /* 끝 부분에 플렉스 아이템 정렬 */
center /* 가운데에 플렉스 아이템 정렬 */
stretch /* 플렉스 아이템을 컨테이너에 맞춰 늘림 */
space-between /* 간격을 동일하게 조절하여 아이템 정렬 */
space-around /* 아이템과 컨테이너 양 끝에도 간격을 두어 정렬 */