flex-flow
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
試してみましょう
構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
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: revert-layer;
flex-flow: unset;
値
値に関して詳しくは、 flex-direction
および flex-wrap
をご覧ください。
公式定義
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | フレックスコンテナー |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
flex-flow =
<'flex-direction'> ||
<'flex-wrap'>
<flex-direction> =
row |
row-reverse |
column |
column-reverse
<flex-wrap> =
nowrap |
wrap |
wrap-reverse
例
column-reverse と wrap の設定
css
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 フレックスボックスガイド: フレックスアイテムの順序