CSS3 スケーラブル ボックス属性。子要素を均等に表示したり、子要素のサイズを比例的に表示したりするために使用できます_html/css_WEB-ITnose

この使用法は Android の android:layout_weight 属性に似ています。現在、すべてのブラウザーがほとんどの属性をサポートしていないため、すべての属性を Firefox に追加する必要があります。 Safari、Opera と同様に、代替の -moz- および -webkit- プレフィックスをサポートする Chrome では、基本的にすべての CSS3 プロパティがこれを行う必要があります。つまり、各プロパティは少なくとも 3 つ設定する必要があります。以下の例を参照してください。

親コンテナ属性:
display:box; この属性が定義されている場合、子要素を中央に表示したい場合は margin:0px auto が無効になり、text-align:center を使用する必要があります (レイアウトAndroid のメソッドは LinearLayout の子です。CSS3 での表示は box)
に似ています。垂直) | 継承; (Android android:orientation 属性)
box-direction: 通常 (デフォルト) | reverse (反転) |
box-align (親コンテナー内の子コンテナーの垂直方向の配置) ) | 終了 (下) | 中心 (中央) | ベースライン ストレッチ (Android の重力属性)
開始 (左) | 終了 (右) ) | center (中央揃え) | justify (親コンテナーの水平方向の幅と同じ); (Android の android:gravity 属性)
box-lines (親ボックス内のスペースを超える場合、列を新しい行に表示するかどうかを指定します。現在、ブラウザーでは box-lines 属性がサポートされていません。 ) : single|multiple;

例:

display:box;
display:-moz-box;
display:-webkit-box;
box-orient: horizo​​ntal;
-moz- box-orient:horizo​​ntal;
-webkit-box-orient:horizo​​ntal;

サブコンテナ プロパティ:
box-flex (ボックスの子要素がそのサイズを縮小できるかどうかを指定します。) : 値 (要素のスケーラビリティ) OK。たとえば、box-flex が 2 の子要素は、box-flex が 1 の子要素の 2 倍の大きさになります。)特定の幅または高さおよびマージンを持ち、他の要素は親コンテナに従います。これらの特定の値はサイズから減算され、比例して配分されます。

親コンテナが幅を 1200px に設定し、box-orient が水平方向の分割、つまり水平軸または inline-axis として定義され、子要素が box-flex をそれぞれ 1、2、3 として定義する場合、幅は最初の子要素は 200 ピクセル、2 番目は 400 ピクセル、3 番目は 600 ピクセルになります。 2 番目の子要素の幅が 300px に定義されており、最初と 3 番目の box-flex 定義がそれぞれ 1 と 2 の場合、最初の幅は (1200 - 300) * 1 / (1+2) = 300px になり、3 番目の幅は (1200 - 300) * 1 / (1+2) = 300px になります。 1 つは 600 ピクセル、2 つ目は 300 ピクセルです。マージンが設定されている場合は、マージンを差し引いて再度割る必要があります。

(Android の android:layout_weight 属性)

例:

box-flex:3;
-moz-box-flex:3;
-webkit-box-flex:3;