BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]css3 elastic box flexによる3カラムレイアウトの実装。

2022-02-02 04:39:12

タイトル通り：高さ既知、左右カラム幅300px、真ん中適応型。

エラスティックボックス自体は横並びになっているので、幅を設定します。

3列をコンテナコンテナで包み、コンテナコンテナのdisplayプロパティをflexに設定し、左右の列の幅を300pxに設定し、中列にflex:1を設定します、1は幅の比率を意味し、正確な値は他のボックスのflex値に依存し、ここでは他のボックスの幅は固定なので、中列は自動的に埋められることになります。 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three-column layout</title>
</head>
<style type="text/css">
    html*{
        margin: 0;
        padding: 0;
    }
    .container{
        display: flex;
    }
    .left{
        background-color: aqua;
        width: 300px;
        height: 100px;
    }
    .center{
        height: 100px;
        flex: 1;
        background: #f296ff;
    }
    .right{
        height: 100px;
        background-color: #6ee28d;
        width: 300px;
    }
</style>
<body>
<! -- with known height, write a three-column layout with a left and right width of 300px and an adaptive middle -- >
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>


</html>

効果はこんな感じです。

3列レイアウトを実現するためのCSS3フレックスボックスフレックスに関するこの記事は、これに導入され、より関連するCSS3フレックス3列レイアウトコンテンツは、スクリプトホーム以前の記事を検索するか、次の関連記事を閲覧し続け、私はあなたが将来的にスクリプトホームをよりサポート願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します