新しいcss属性display:boxの使用方法

今回は新しいcss属性display:boxの使い方と注意点についてお届けします。以下は実践的なケースですので見ていきましょう。

1. display:box;

この属性を要素に設定すると、display:inline-block; と同様に、その子孫を同じレベルに配置できます。

2. その子に次の属性を設定できます

前提条件: 次の属性を使用するには、display:box;

1.box-flex:number;

1) を占有します要素幅の親数値部分

2) 子要素が固定幅に設定されている場合、子要素は固定幅を適用し、固定幅に設定されていない他の単語要素は残りの親幅を使用します(親 - 固定幅を設定した子要素) 全体の幅を数値部分に分割します

3) 子要素にマージン値がある場合、残りの値に応じて幅を数値部分に分割します(親幅-子固定)合計幅-合計マージン値) width

2.box-orient:horizo​​ntal/vertical

このプロパティが親に設定されている場合、子は水平または垂直に配置されます。

注: すべての主要なブラウザはこの属性をサポートしていないため、接頭辞を付ける必要があります。

1）横配置、子の幅の合計＝親の幅になります。親の幅が固定の場合、子によって設定された幅は無効となり、子は親の幅を埋めます。

２）縦配置、子の高さの合計＝親の高さになります。親の高さが固定されている場合、子によって設定された高さは無効になり、子は親の高さを埋めます。

3.box-direction:normal/reverse

この属性を親に設定して、子の順序を確認します。

1)normal デフォルト値、子はhtml順に並べます

2)reverse 逆順

4.box-align:start/end/center/stretch

親に設定する、子の縦方向の配置です。

1) 垂直上部の配置を開始します

2) 垂直下部の配置を終了します

3) 垂直方向の中心を中央に配置します

4) ストレッチは、親が設定した高さと一致するように子の高さをストレッチします。子供の身長が無効です。

5.box-pack:start/end/center

親レベルでの子の水平方向の配置を設定します。

1) 開始 水平左揃え

2) 終了 水平右揃え

3) 中央 水平中央揃え

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。 PHP 中国語 Web サイトの他の関連記事へ!

推奨書籍:

DW にバナー ボタンを追加する方法

フロントエンド Web ページの基本パフォーマンスの最適化

以上が新しいcss属性display:boxの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。