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

取り扱い Flexible Box Layout Module
適用可能 Flexアイテム、疑似要素
継承 しない
対応ブラウザ flexの対応状況を確認する

flexプロパティの説明

flexは、CSSで柔軟なレイアウトを実現するために考案された「Flexible Box Layout Module(フレキシブル・ボックス・レイアウト・モジュール)」を制御するプロパティの一種です。flexは、flex-growflex-shrinkflex-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
コンテンツサイズに調整されます。
CSS
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
// このプロパティをまとめて指定できる
flex: 1 1 auto;

flexの使用サンプル

準備中です。

CSS
.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;
}
表示確認
//未定義

flexに関連するCSSプロパティ

カラム・レイアウト関連
align-content flexコンテナ内の縦に余白がある場合にflexアイテムの並べ方を指定する
align-items flexコンテナ内に含まれる全てのflexアイテムに対して揃える位置を指定する
align-self flexコンテナ内にあるflexアイテムの位置揃えを個別に指定する
box-flex flexboxコンテナの伸縮比率を指定する
box-flex-group flexboxコンテナにグループを割り当てて伸縮の優先順位を指定する
column-count カラム数を指定する
column-fill カラム同士の高さ(長さ)を揃えるかどうかを指定する
column-gap カラムの間隔を指定する
column-rule カラムの区切り線のスタイル・幅・色を指定する
column-rule-color カラムの区切り線の色を指定する
column-rule-style カラムの区切り線のスタイルを指定する
column-rule-width カラムの区切り線の幅を指定する
column-span 要素がまたがる(横切る)カラム数を指定する
column-width カラム幅を指定する
columns カラム幅とカラム数を指定する
flex flexbox内のアイテムの伸縮に関する指定をまとめて行う
flex-basis flexbox内のアイテムの固定幅を指定する
flex-direction flexbox内のアイテムの並び順を指定する
flex-flow flexbox内のアイテムの並び順と折り返しの指定をまとめて行う
flex-grow flexbox内のアイテムの伸びる倍率を指定する
flex-shrink flexbox内のアイテムの縮む倍率を指定する
flex-wrap flexboxに入り切らないアイテムの折り返し方法について指定する
justify-content flexboxコンテナ内でのボックスの詰め方を指定する
order flexbox内のボックスの配置順序を指定する