flex-flow
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;
/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;
/* flex-flow: <'flex-direction'> および <'flex-wrap'> */
flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;
/* グローバル値 */
flex-flow: inherit;
flex-flow: initial;
flex-flow: revert;
flex-flow: unset;
値
値に関して詳しくは、 flex-direction
および flex-wrap
をご覧ください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | フレックスコンテナー |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
flex-flow =
<'flex-direction'> ||
<'flex-wrap'>
例
column-reverse と wrap の設定
element {
/* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
flex-flow: column-reverse wrap;
}
仕様書
Specification |
---|
CSS Flexible Box Layout Module Level 1 # flex-flow-property |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスアイテムの順序