flexbox_html/css_WEB-ITnose の概要

1. 概要

モバイル レイアウトではフローティングはもはや重要ではなくなり、フレックス ボックス モデルの重要性がますます高まっています。

flexbox经历过三个版本，主要区别是2009年到2012年之间的语法变化。最新的语法和现在规范是同步的（例display:flex和“flex-{*}”属性）。在这之间的语法是2011年出现的非官方语法，只能被IE识别（例display:flexbox;display: -ms-flexbox）。最老的语法产生于2009年（例display: box;或者“box-{*}”属性）

Flexbox は、複雑なレイアウトを実現できる CSS3 の新しいボックス モデルです。 Flexbox は、Firefox、Opera、および chrome ブラウザでは完全にはサポートされていませんが、それらのプライベート プロパティを使用して、Firefox (-moz)、opera (-o)、chrome/safari (-webkit) を定義できます。

フレックスボックスの古典的なレイアウトアプリケーションは、垂直均等高さ、水平分割、および比例分割です。

2. フレックスボックスの一般的に使用される属性

1. 親要素に使用されるスタイル

display:block; この属性は、この要素とその直接の子孫をフレックスボックス モデルに追加します。 (フレックスボックス モデルは直系の子孫にのみ適用されます)

box-orient:horizo​​ntal|vertical|inline-axis|block-axis|inherit; この属性は、親要素内の子要素がどのように配置されるかを定義します。水平は親要素の幅を割り当てます。

box-pack:start|end|center|justify; box-pack は、親コンテナ内のサブコンテナの水平方向の配置を表します

box-align:start|end|center|baseline|ストレッチ; 親コンテナ内の子コンテナの

垂直

配置を表します。

2. 子要素に使用されるスタイル

box-flex:0|任意の数値。この属性により、親コンテナの幅に応じて特定のルールに従って子コンテナを分割できます。

3. クイックスタートデモ

1. 子要素が水平に配置され、親要素の幅が比例して分割されます

。親の幅は 500px、その子要素は水平に配置され、子要素は 1/ を占めます。 6、子 2 は 2/6 を占め、子 3 は 3/6 を占めます。 parent の子要素は垂直方向に配置されるため、各子要素は幅の 100% を占めます。

<style>        .parent{            width: 500px;            height: 200px;            display: -webkit-box;            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;        }        .child-three{            background: lightgreen;            -webkit-box-flex: 3;        }    </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->    <div class="parent">        <div class="child-one">1</div>        <div class="child-two">2</div>        <div class="child-three">3</div>    </div></div>

4. 子要素は水平方向に配置され、垂直方向の配置は固定された高さで中央に配置されます。

子要素の高さが固定されている場合、子要素は水平方向に配置されます。 、垂直方向の配置を中央揃えに設定します。

<style>        .parent{            width: 500px;            height: 200px;            display: -webkit-box;            background-color:pink;            -webkit-box-orient: horizontal;/* 虽然默认的排列方式是水平的，但是为了区分起见，加上该属性 */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;        }        .child-three{            background: lightgreen;            /*定宽，并加上左右margin,父元素加上粉色背景色更好理解*/            width:150px;            margin:0 15px;        }    </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->    <div class="parent">        <div class="child-one">1</div>        <div class="child-two">2</div>        <div class="child-three">3</div>    </div></div>

4. クラシック レイアウト

フレックスボックスのクラシック レイアウト アプリケーションは、垂直均等高さ、水平均等分割、比例分割、水平垂直センタリングであり、モバイル ポップアップ ウィンドウも実現できます。

1. 垂直方向の高さ、水平方向の分割、比率に従って分割します

<style>        .parent{            width: 400px;            height: 600px;            display: -webkit-box;            background-color:pink;            -webkit-box-orient: vertical;/*子元素垂直排列 */        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;        }        .child-three{            background: lightgreen;            /*定高，有上下margin,父元素加上粉色背景色更好理解*/            height:200px;            margin:15px 0;        }    </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->    <div class="parent">        <div class="child-one">1</div>        <div class="child-two">2</div>        <div class="child-three">3</div>    </div></div>

完全なデモ

<style>        .parent{            width: 400px;            height: 200px;            display: -webkit-box;            background-color:pink;            -webkit-box-orient: horizontal;            /*-webkit-box-align:center;/*父元素中子元素水平排列，定高时设置垂直方向对齐方式为垂直居中*/        }        .child-one{            background: lightblue;            -webkit-box-flex: 1;            height:100px;        }        .child-two{            background: lightgray;            -webkit-box-flex: 2;            height:110px;        }        .child-three{            background: lightgreen;            -webkit-box-flex: 2;            height:120px;        }    </style></head><div style="display: -webkit-box;-webkit-box-pack: center;border: 1px solid #000;"><!---webkit-box-pack:center让.parent水平居中-->    <div class="parent">        <div class="child-one">1</div>        <div class="child-two">2</div>        <div class="child-three">3</div>    </div></div>

2. 水平方向の中央揃え

.parent{display: -webkit-box; display: -webkit-flex; display: flex;}.child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}

完全なデモ:

りー

3. 垂直方向のセンタリング

<style>    .parent{display: -webkit-box; display: -webkit-flex; display: flex;    height:100px;    width:150px;    background-color:pink;}    .child{-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;    border:1px solid green;    }</style><div class="parent">  <div class="child"></div>  <div class="child"></div>  <div class="child"></div></div>

完全なデモ

4. モバイル側のポップアップ ウィンドウ

モバイル側の多くのポップアップ ウィンドウ コンポーネントは、div を直接ネストして、フレックスボックスを使用して実装されています。オーバーレイ>div.pop.

.parent{display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;}

5. 互換性

PC:

プレフィックスなし: Chrome 29+、Firefox 28+、IE 11+、Opera 17+

プレフィックスが必要です: Chrome 21+、Safari 6.1 以降、Opera 15 以降では、プレフィックス -webkit-

が必要です。

ヒント:

Firefox の古いバージョン (22-27) は、flex-wrap と flex-flow に加えて、新しい構文をサポートしています。 Opera (12.1+ - 17+) はプライベート プレフィックスなしで flex を使用できますが、中間バージョン 15 および 16 ではプライベート プレフィックスが必要です。

モバイル:

プレフィックスなし: Android 4.4+、Opera mobile 12.1+、BlackBerry 10+、Chrome for Android 39+、Firefox for Android 33+、IE 11+ mobile

必須プレフィックス: iOS 7.1+ 必須プレフィックス-webkit-

6. リソースリンク

display:-webkit-box

Flexbox 完全ガイド Flexbox の探索

現在の Web アプリの Flexbox アプリケーション

starof、この記事の著者、なぜなら知識自体が著者は常に学習し成長しており、記事の内容は随時更新されます。読者の誤解を避け、出典を追跡しやすくするため、転載する際には出典を明記してください。ご質問がございましたら、お気軽にお問い合わせください。自由に私と話し合って一緒に進歩してください。