flex propertyの一括指定を使ってアイテムの長さ(横並び)を指定する

flexプロパティは CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナの領域に収めるために、どのように伸長・収縮させるかをフレックスアイテムに指定する。

/* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

flex: の初期値は flex: 0 1 auto;

• flex-grow: 0
• flex-shrink: 1
• flex-basis: auto

.flex-wrapper {
  display: flex;
}

<div class="flex-wrapper">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

flex: 1 や flex: 2; など数値がひとつの場合

flex で指定した数値に単位をつけない場合、flex の値は flex-grow の値をとる。

フレックスコンテナに余白があるときに、伸びてほしければflex-grow: 1;、そうでなければflex-grow: 0;とする。flex: 1;、flex: 2; の場合は flexアイテムは 1 : 2 の割合である。

<div class="flex-wrapper">
  <div style="flex: 1;">A</div>
  <div style="flex: 1;">B</div>
  <div style="flex: 2;">C</div>
</div>

flexの数値が単位無しの 2 つのとき

<div class="flex-wrapper">
  <div style="flex: 1 1; background-color: #f1c0c0; border: 1px dashed #333;">A</div>
  <div style="flex: 2 2; background-color: #c0e5f1; border: 1px dashed #333;">B</div>
  <div style="flex: 3 3; background-color: #e9f1c0; border: 1px dashed #333;">C</div>
</div>

flexの数値が 3 つのとき

flexの値が3つのとき、flex は flex-grow、flex-shrink、flex-basis のショートハンド指定となる。

<div class="flex-wrapper">
  <div style="flex: 1 1 25%; background-color: #f1c0c0; border: 1px dashed #333;">A</div>
  <div style="flex: 2 2 25%; background-color: #c0e5f1; border: 1px dashed #333;">B</div>
  <div style="flex: 3 3 25%; background-color: #e9f1c0; border: 1px dashed #333;">C</div>
</div>

このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定する。主軸方向の寸法は、アイテムの幅または高さのどちらかで、 flex-direction の値に依存して決まる。

flex-growプロパティ

<div class="flex-wrapper">
  <div style="flex: 1; ">A</div>
  <div style="flex: 1; ">B</div>
</div>

flex-growプロパティ + width:

<div class="flex-wrapper">
  <div style="flex: 1; width: 20%; ">A</div>
  <div style="flex: 1; width: 20%; ">B</div>
</div>

親要素にスペースがなくすべての子要素が入り切らない場合、指定のある子要素が他の子要素に対してどれくらい縮小するかを指定する。また、要素を縮めたくないときに指定する。

flexアイテムが親要素の幅を超えるとき、各flexアイテムは均等な幅となる性質がある。そこで flex-shrink を使用すれば、親要素の幅からはみ出た部分を縮小することができる。flexアイテムは flex-shrink の初期値が1であるため、親要素の幅を超える場合は自動的に縮小し、親要素の幅に収まる。

フレックスコンテナに余白がないとき（はみ出るとき）に、縮んでほしければflex-shrink: 1;、そうでなければflex-shrink: 0;とする。

<div style="display: flex; text-align: center; border: 1px dashed #333; width: 300px;">
          <div style="width: 60%; background-color: #f1c0c0; border: 1px dashed #333;">A</div>
          <div style="width: 50%; background-color: #c0e5f1; border: 1px dashed #333;">B</div>
          <div style="width: 40%; background-color: #e9f1c0; border: 1px dashed #333;">C</div>
        </div>

この状態を「flex-shrink:」を使って変えてみる。

<div style="display: flex; text-align: center; border: 1px dashed #333; width: 70%;">
  <div style="width: 60%; flex-shrink: 1; background-color: #f1c0c0; border: 1px dashed #333;">A</div>
  <div style="width: 50%; flex-shrink: 2; background-color: #c0e5f1; border: 1px dashed #333;">B</div>
  <div style="width: 40%; flex-shrink: 3; background-color: #e9f1c0; border: 1px dashed #333;">C</div>
</div>

flex-shrink: 0;

<div class="flex-wrapper" style="align-items: center; width: 100%; height: 100px; padding: 0;">
  <h1 style="height: 80px; color: #fff; font-size: 16px; line-height: 80px; background: green; margin-right: 10px; flex-shrink: 0; padding: 0; margin: 0 0 0 16px;">ポイント</h1>
  <p style="padding-left: 16px;">「flex-shrink: 0;」を指定すると、縮小されない。</p>
</div>

width と同じように子要素の幅の値を指定できる。auto 指定した場合は子要素のコンテンツのサイズが適応される。「flex:」 で指定した数値に単位をつけた場合、flex の値は flex-basis の値をとる。

flex-basis: と width の優先順位

基本的に幅を指定する際は、widthを指定するが、flex-basisを指定した際には、flex-basisプロパティが優先される。flex-basisは、flex-grow、flex-shrinkがついてなければ、widthやheightプロパティと同じになる。

<div class="flex-wrapper">
  <div style="width: 50px; flex-basis: 150px; background-color: #f1c0c0; border: 1px dashed #333;">150px</div>
  <div style="width: 50px; flex-basis: 150px; background-color: #c0e5f1; border: 1px dashed #333;">150px</div>
  <div style="width: 50px; flex-basis: 150px; background-color: #e9f1c0; border: 1px dashed #333;">150px</div>
</div>

flex-basis は max-width によって制限される

flex-basis: 250px;を設定したのに max-width: 100px の制限に達した。したがって、この場合の最終局面はflex-basis: 100px; であり、アイテムは次のようにフレックス コンテナに収まる。

<div class="flex-wrapper">
  <div style="max-width: 100px; flex-basis: 250px; background-color: #f1c0c0; border: 1px dashed #333;">100px</div>
  <div style="max-width: 100px; flex-basis: 250px; background-color: #c0e5f1; border: 1px dashed #333;">100px</div>
  <div style="max-width: 100px; flex-basis: 250px; background-color: #e9f1c0; border: 1px dashed #333;">100px</div>
</div>

flex-basis: の値を％に指定した場合

<div class="flex-wrapper">
  <div style="flex-basis: 20%; background-color: #f1c0c0; border: 1px dashed #333;">20%</div>
  <div style="flex-basis: 30%; background-color: #c0e5f1; border: 1px dashed #333;">30%</div>
  <div style="flex-basis: 50%; background-color: #e9f1c0; border: 1px dashed #333;">50%</div>
</div>

flex: auto = flex: 1 1 auto; の設定の例

この Flexbox の配置の例を使って、このページのセクション 5 のレイアウトを実行。

<div id="flex-container">
  <div class="flex-item">flex-item</div>
  <div class="raw-item">raw-item</div>
</div>

#flex-container {
  display: flex;
  flex-direction: row;
}
#flex-container > .flex-item {
  flex: auto;
}
#flex-container > .raw-item {
  width: 5rem;
}

主軸上での位置合わせの auto マージン

<div class="box-3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="push">Four</div>
  <div>Five</div>
</div>

.box-3 {
  display: flex;
}
.push {
    margin-left: auto;
}

4 つめのアイテムに対して margin-left に auto を設定すれば、先頭の 3 つから分離できる。両側のマージンが取れるだけの余白を取ろうとするために、ブロックが中央に押し出されることになる。