css3 box box モデルと box-flex_html/css_WEB-ITnose の使用に関する簡単な説明

display:box;box-flex は、css3 に新しく追加されたボックス モデル属性であり、その外観により、N-multi 構造と CSS を通じて実装されるレイアウト方法を解決できます。古典的なレイアウト アプリケーションは、レイアウトの垂直方向の均等な高さ、水平方向の分割、および比例分割です。

1. 使用法と導入:

1. 水平または垂直のセグメンテーションを実現するには、まず次の要件を満たす必要があります

i. 表示: ボックスは、div などの対応する親ウィンドウで使用する必要があります。 .parent> div.panel*3 のこの形式では、親は最初にこの属性を定義する必要があります

ii. 比例セグメンテーションを実現するには、.panel の要素で box-flex を定義します。以下のように、3 つの div を横に 6 つの部分に分割します。レイアウトを理解するには、div.panel1+div.panel2+div.panel3 という方法も可能ですが、今日は box を考慮します。これを実装します

2. 垂直レイアウトには他の要素が含まれます 属性:

box-orient (親要素上):

この属性には次の値があります

.parent{display:box or -moz-box or -wekit-box}.panel1{box-flex : 1};.panel2{box-flex : 2};.panel3{box-flex : 3};

horizontal //水平vertical // 垂直inline-axis //也算是水平block-axis//也算是垂直，跟垂直没有什么区别inherit // 水平，垂直

今は横レイアウトも縦レイアウトも問題ないのですが、たまに凹凸の横レイアウト（例：中央にa、両側にb、cを突き出す）や凹凸を実現したいことがあります。この場合、縦型レイアウトはどうすればいいのでしょうか？これが必要な場合は、もちろん、上記の box-orient は使用できません。この場合、ボックス内の幅と高さは異なっていても構いません

それでは、bc モジュールとモジュールの垂直方向の配置と水平方向の配置を実現できますか?

3. 次に、この属性を使用できます:

box-align (親要素で使用):

次の属性値があります

p.s : 当设置了水平(horizontal)或者 inline-axis 的话，如果父容器设置了高度，子容器的高度会跟父容器保持一致（即时子容器设置了高度也无效）。如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。同理，如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话，子容器设置宽度会无效。如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度

start  // 理解为valign = top 以顶部对齐, 、end  //理解为  valign = bottom 以底部对齐center // 理解为  valign = center 以居中对齐baseline //理解为以某一个元素的基准线进行对齐，stretch(默认值)  //以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸

4. Box-pack は、親コンテナ内のサブコンテナの水平方向の配置を表します。このパラメータが有効になるための前提条件は次のとおりです。

サブコンテナの全長

2. よくある問題のまとめ

1.あるブロックのレイアウトはどうでしょうか? 結果は次のデモのようになります

このように書くと (比例区別と正確な幅の両方がある場合、比率は無効です) ) このとき、中央のピースは常に 200px となり、両側の 2 つのピースは親コンテナの幅に基づいて -200px が按分されており、これも要件を満たしています。