CSS flex-wrap | CSS プロパティ値| 意味使い方実例

CSS flex-wrap| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-07-08 css-reference

ページコンテンツ

`flex-wrap` CSS プロパティとは

トピック：フレックスアイテムが1行に強制されるか、フレックスコンテナで使用可能なスペースに基づいて複数の行または列に折り返されるかを指定する事ができる

基本書式：

セレクタ

{

flex-wrap

値;

}

必要に応じて、flexアイテムを折り返すサンプルコードを試す

 div {
    display: -webkit-flex; 
/* Safari */
    -webkit-flex-wrap: wrap; 
/* Safari 6.1+ */
    display: flex;   
    flex-wrap: wrap;
}

デフォルト値・初期値 :	`nowrap`
適用対象 :	flex containers
継承 :	不可
メディア :	visual
計算値 :	指定値
`CSS Version`	`CSS3`
アニメーションの種類 :	個別アニメーション可能なプロパティ一覧
JavaScript 構文	object.style.flexWrap="funWebref"
正規順序 :	形式文法で定義される一意のあいまいでない順序
CSSの構文	`flex-wrap: nowrap \| wrap \| wrap-reverse \| initial \| inherit;`

値	説明
`nowrap`	すべてのフレックスアイテムが単一の行または列に表示され、フレックスコンテナがする可能性があることを指定するフレックスコンテナの`overflow`CSSプロパティは、フレックスアイテムが隠されているか、クリップされているか、スクロール可能かを決定する
`wrap`	必要に応じて、柔軟な項目を複数行にすることを指定する
`wrap-reverse`	`wrap`ラップと同じ動作をしますが、アイテムは逆の順序でラップされる
`inherit`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

：flex-wrap 関連記事