CSS3 の FLEX を使用して BorderLayout レイアウトをすばやく実装する方法

BoxLayout レイアウト プログラマでバックエンド UI コードを書いたことがある人は、HTML フレームも含めてよく知っているはずですが、以前は CSS の制御に float が使用されていました。制御は比較的簡単でしたが、より複雑で、さらに多くのタグとコードを追加する必要があります

このインターフェイスを読んだ後、タグのコード レイアウトを書き始めることができます:

<div class="parent">
    <header>北</header>
    <aside class="left">东</aside>
    <div class="center">中</div>
    <aside class="righ">西</aside>
    <footer>南</footer>
</div>

コードは非常に簡単です。もちろん、親を追加することもできます。必要な場合を除き、親を削除して本体を親として使用します。次に、CSS を使用して BoxLayout を定義します。親をフレックスコンテナとして、方向は左から右で、行の折り返しが可能です
それから、フレックスアイテム、ヘッダーとフッターのレイアウトモードを flex-basis:100% に設定します。行全体を占め、両側の幅が等しく、中央が両側の辺より広いので、flex -growを使用して占有率を設定します。

.parent{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
}

このようにして、BoxLayoutレイアウトが実現されます。非常に簡単ではありませんか? 対応する高さと背景色を設定することを忘れないでください。そうしないと、空白の白が表示されます。参考として、このように設定しました。 OK!

以上がCSS3 の FLEX を使用して BorderLayout レイアウトをすばやく実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。