ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS flex-wrap 属性の使用方法
CSS flex-wrap 属性の使用方法
- 藏色散人オリジナル
- 2019-05-27 16:48:104468ブラウズ
css flex-wrap 属性は、フレックス コンテナーが単一行であるか複数行であるかを指定するために使用されます。同時に、横軸の方向によって新しい行の積み重ねの方向が決定されます。CSS 構文は flex です。 -wrap: nowrap|wrap|wrap-reverse|initial|inherit ;要素が flexbox オブジェクトの要素でない場合、flex-wrap プロパティは効果がありません。
CSS flex-wrap 属性を使用するにはどうすればよいですか?
定義と使用法
flex-wrap 属性は、フレックス コンテナーが単一行であるか複数行であるかを指定し、水平軸の方向によって決まります。新しい行が積み重ねられる方向。 。
注: 要素がフレックスボックス オブジェクトの要素ではない場合、flex-wrap プロパティは効果がありません。
デフォルト: nowrap
継承: いいえ
アニメーション化可能: いいえ。
バージョン: CSS3
JavaScript 構文:
object.style.flexWrap="nowrap"
CSS 構文:
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
属性値
nowrap デフォルト値。フレキシブル項目は行または列に分割しないように規定されています。
wrap 必要に応じて、フレキシブル項目を行または列に分割することを指定します。
wrap-reverse 必要に応じてフレキシブル項目を行または列に分割することを指定しますが、順序は逆になります。
initial このプロパティをデフォルト値に設定します。
inherit このプロパティを親要素から継承します。
#例
必要に応じてフレックスボックス要素を分割します:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: wrap;
}
#main div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">A</div>
<div style="background-color:lightblue;">B</div>
<div style="background-color:khaki;">C</div>
<div style="background-color:pink;">D</div>
<div style="background-color:lightgrey;">E</div>
<div style="background-color:lightgreen;">F</div>
</div>
<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 flex-wrap 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-flex-wrap 属性支持该属性。</p>
</body>
</html>効果: #
以上がCSS flex-wrap 属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。