CSS flex-wrap 属性の使用方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

CSS flex-wrap 属性の使用方法

藏色散人

May 27, 2019 pm 04:48 PM

css flex-wrap 属性は、フレックスコンテナーが単一行であるか複数行であるかを指定するために使用されます。同時に、横軸の方向によって新しい行の積み重ねの方向が決定されます。CSS 構文は flex です。 -wrap: nowrap|wrap|wrap-reverse|initial|inherit ;要素が flexbox オブジェクトの要素でない場合、flex-wrap プロパティは効果がありません。

CSS 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。