flex-flow
CSS の flex-flow
プロパティは、 flex-direction
プロパティと flex-wrap
プロパティの一括指定プロパティです。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* 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: unset;
値
値に関して詳しくは、 flex-direction
および flex-wrap
をご覧ください。
形式文法
例
element {
/* main-axis は block 方向で、 main-start と main-end を逆にします。フレックスアイテムは複数行にレイアウトされます */
flex-flow: column-reverse wrap;
}
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Flexible Box Layout Module flex-flow の定義 |
勧告候補 | 初回定義 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | フレックスコンテナー |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 離散値 |
ブラウザーの対応
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスアイテムの順序