CSS3 のフレキシブル ボックス モデル レイアウト box-flex_html/css_WEB-ITnose

box-flex：也就是让子容器针对父容器的宽高属性按照一定的规则来划分

Eg：

html代码：

01

02

03

CSS样式：

预蕈果：

解析：

先見父级元素中設置のプロパティ

1、box-orient:block -軸;      子元素按照块類型竖方向表示;

2、ボックス方向:逆;      

子要素の表示順序を反対にしておきます。

子要素内のプロパティを再確認します (これは、色領域と 01 文字を含むモジュールの例です)

1、box-flex:3;  全体的に見ると、低級元素は６つに分かれており、色の領域は３／６を占めており、上図では全体の高さの１／２を示している。

2、ボックス順序グループ​​:1;   つまり、各子要素が 1 つのグループを決定し、そのグループのサイズが表示されます、先小後大； サブ要素のグループ内で定義されているサイズ、本应は色居上、色居中、色最下に表示されますが、父にあります。階層要素中、ある子要素の逆方向提示方式 (box-direction:reverse) を定義します。つまり、反対です。あるモジュールが固定数字に設定されている場合、他のモジュールが同様の比率を示す可能性がありますか? この例をもう一度見てみましょう (例 1 で変更されています)。変更内容：

予見効果：

このとき、色モジュールの高さは固定され、100 に設定され、父元素の半分を占めます。前の図からわかるように、他のモジュールは、固定の値が設定されているか、または高い場合は、より高い値になる可能性があります。または、高就变了、应

版权：本文は博主原文、未经博主允许不得转莱。