主軸に沿ったフレックス要素のサイズ

プロパティwidthとheightは、 軸の方向に関係なくフレックス要素の 幅と高さを指定します。つまり、軸が水平の場合、 widthは幅を指定しますが、 軸が垂直の場合でも、widthは依然として 幅を指定します。この動作は不便な場合があります。

フレックスモデルには、要素の主軸に沿ったサイズを 指定する特別なプロパティflex-basisがあります。 これは、主軸が水平の場合は要素の幅を指定し、 垂直の場合は高さを指定することを意味します。 このプロパティは、親要素ではなく、フレックス要素 自体に設定する必要があります。例を見てみましょう。

現在、主軸が水平で、 flex-basisの値が50pxとします。 この場合、要素の幅は50pxになります:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: row; /* 軸は水平 */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;   /* 要素のサイズ */
  border: 1px solid green;
}

Результат:

では、flex-basisプロパティの値を変えずに 軸を反転させてみましょう。この場合、 要素の高さが50pxになります:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

css.parent {
  display: flex;
  flex-direction: column; /* 軸は垂直 */
  width: 300px;
  height: 300px;
  border: 1px solid red;
}
.child {
  flex-basis: 50px;
  border: 1px solid green;
}

Результат: