Flexbox

Flexboxを使用すると、レイアウト構造をより容易に設計できます.

Usage

Flexboxモデルを使用するには、まずflex containerを定義する必要があります.

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.flex-container {
  display: flex;
}

コンテナのプロパティ

flex-direction

flex itemを構築する方向を定義します.

column

column-reverse

row

row-reverse

flex-wrap

flex itemの改行を設定します.

nowrap(デフォルト)

wrap
行を成す

wrap-reverse

flex-flow

flex-directionおよびflex-wrapのショートカット属性

.container {
  display: flex;
  flex-flow: row wrap;
}

justify-content

Flexアイテムのソート(水平)

center

flex-start(デフォルト)
flex containerの先頭に並ぶ

flex-end
flex containerの末尾に並ぶ

space-around
等辺距離配列

space-between
第1項と最後項は容器の各一端に位置し、残りの項は平均

配列されている.

align-items

Flexアイテムのソート(垂直)

center

flex-start

flex-end

stretch(デフォルト)
プロジェクトの長さを増やしてflexコンテナを埋めます.

baseline
flex itemを文字ベースラインに並べ替えます.

align-content

flex lineソート

space-between

space-around

stretch(デフォルト)

center

flex-start

flex-end

itemsの行にはalign-itemsプロパティが使用されます.

itemsプロパティ

order

flex itemの順序を指定します.

<div class="flex-container">
  <div style="order: 2">1</div>
  <div style="order: 1">2</div>
  <div style="order: 3">3</div>
</div>

flex-grow

残りのflex itemよりどれだけ大きくなるかを指定します.

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>  <!-- 8배 -->
</div>

flex-shrink

残りのflex itemと比較してどのくらい縮小するかを指定します.既定値は1です.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>  <!-- 축소되지 않음 -->
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

flex-basis

flex itemの初期長さを指定します.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

flex

flex-grow、flex-shrink、flex-basisのショートカット属性

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>  <!-- 확대/축소 불가능, 초기 길이 200px -->
  <div>4</div>
</div>

align-self

選択項目の整列(垂直)

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>