flex：Flexアイテムの伸縮率や基準となる幅を指定する

flexプロパティの説明

flexは、CSSで柔軟なレイアウトを実現するために考案された「Flexible Box Layout Module（フレキシブル・ボックス・レイアウト・モジュール）」を制御するプロパティの一種です。flexは、flex-grow、flex-shrink、flex-basisのショートハンドで、Flexコンテナに含まれるアイテムの伸縮倍率や基準となる幅をまとめて指定するために用います。

flexプロパティには、以下のプロパティの機能が含まれます。それぞれの値は、半角スペースで区切って指定することができます。

flex-grow

Flexアイテムが伸びる倍率を指定します。Flexコンテナに含まれるFlexアイテムを一列に並べた時に、余白が余る場合は各アイテムに指定されたflex-growの値に従って、自動的に幅を調整してコンテナの余白を埋めます。

flex-shrink

Flexアイテムが縮む倍率を指定します。Flexコンテナに含まれるFlexアイテムを一列に並べた時に、基準値の幅に収まり切らない場合は各アイテムに指定されたflex-shrinkの値に従って、自動的に幅を調整してコンテナに収まるように縮みます。

flex-basis

Flexアイテムの幅の基準となる値を指定します。省略した場合は「0」となり、「auto」と指定した場合は、Flexアイテムのコンテンツサイズに調整されます。

flexに与えられる値

数字と単位で指定する

pxやemといった単位と数字を組み合わせて指定する方法です。「10px」や「2em」のように記述します。負の値は無効。初期値は0です。

パーセントで指定する

「5%」「10%」のように記述します。

auto

コンテンツサイズに調整されます。

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
// このプロパティをまとめて指定できる
flex: 1 1 auto;

flexの使用サンプル

準備中です。

.flex_container {
 display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
 max-width: 900px;
 margin: 20px auto;
}
.item {
 flex: 1 1 auto;
}