플렉시블 레이아웃

플렉시블 레이아웃 (Flexible Layout)

<html>
  <head>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">F</div>
      <div class="flex-item">L</div>
      <div class="flex-item">E</div>
      <div class="flex-item">X</div>
    </div>
  </body>
</html>
.flex-container {
    display: flex; /* 기본값 flex-direction: row */
}

플렉스 축(Axis)

  • 주축 : Main Axis

  • 교차축 : Cross Axis

주축은 row, row-reverse 방향으로 설정한다.

교차축은 column, column-reverse 방향으로 설정한다.

참고

Previous멀티 컬럼 레이아웃Next플렉스 컨테이너

Last updated