flex:Flexアイテムの伸縮率や基準となる幅を指定する
取り扱い | Flexible Box Layout Module |
適用可能 | 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
- コンテンツサイズに調整されます。
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内のボックスの配置順序を指定する |