CSSの基本的な複数列レイアウト

この記事では、CSS の基本的なマルチカラム レイアウトを主に紹介します。必要な友達は参考にしてください。

基本的なレイアウト、主に表示されます。モバイル端末でも同様です。 1列、2列、3列、4列に分かれています。

ここでは 2 つの方法が使用されます。

最初に基本スタイルを設定します:

/*==================common css start================*/
    ul{
        list-style: none;
        background: #f0f1f1;
        padding: 30px 15px;
    }
    li{
        background: #fff;
        text-align: center;
        border: 1px solid #5d2a22;
        padding: 15px;
        box-sizing: border-box;
    }
    .clearfix::after{
        content:"";
        display: block;
        clear: both;
    }
/*==================common css end================*/
/*==================html start================*/    <!--一列-->
    <ul class="one clearfix">
        <li>入选CCTV中国年度品牌</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家分院</li>
    </ul>

    <!--两列-->
    <ul class="two clearfix">
        <li>入选CCTV中国年度品牌</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家分院</li>
    </ul>

    <!--三列-->
    <ul class="three clearfix">
        <li>入选CCTV中国</li>
        <li>获得Hair代理权</li>
        <li>签署5G筛查合作协议</li>
        <li>全国开设近20家</li>
        <li>了解植发需求</li>
        <li> 推荐专业医师</li>
    </ul>

    <!--四列-->
    <ul class="four clearfix">
        <li>咨询</li>
        <li>定位</li>
        <li>检测</li>
        <li>定制</li>
        <li>辅助</li>
        <li>养护</li>
        <li>咨询</li>
        <li>定制</li>
    </ul>/*==================html end================*/

従来の計算方法: float + width の正確な計算

    /*==============传统(浮动+清浮动+宽度精确计算) start=================*/
        /*.one li:nth-child(n+2){
            margin-top: 15px;
        }
        .two li{
            float: left;
            width: 48%;
        }
        .two li:nth-child(even){
            margin-left: 4%;
        }
        .two li:nth-child(n+3){
            margin-top: 15px;
        }
        .three li{
            float: left;
            width: 32%;
            margin-left:2%
        }
        .three li:nth-child(3n-2){
            margin-left:0%
        }
        .three li:nth-child(n+4){
            margin-top: 15px;
        }
        .four li{
            float: left;
            width: 22%;
            margin-left:4%
        }
        .four li:nth-child(4n-3){
            margin-left: 0;
        }
        .four li:nth-child(n+5){
            margin-top: 15px;
        }*/
        /*==============传统(浮动+清浮动+宽度精确计算) end=================*/

1. flex 計算方法: flex

           /*================flex(按照需求设置宽度) start=================*/
           /*为方便查看，这里不单独去掉clearfix类名了*/
           .clearfix::after{            content: none;        }
           ul{            display: flex;            flex-wrap: wrap;            justify-content: space-between;        }
           .one li{            width: 100%;        }
           .one li:nth-child(n+2){            margin-top: 15px;        }
           .two li{            width: 48%;        }
           .two li:nth-child(n+3){            margin-top: 15px;        }
           .three li{            width: 32%;        }
           .three li:nth-child(n+4){            margin-top: 15px;        }
           .four li{            width: 23%;        }
           .four li:nth-child(n+5){            margin-top: 15px;        }
           /*================flex(按照需求设置宽度) end=================*/

   以下に示すように、2 つの方法は同じ効果を実現します:

2. 
   まとめ

最初の方法を使用する場合、要素の幅と要素の間隔を正確に計算する必要があります。わずかなずれがあると、レイアウトが崩れます。

使用方法 2 では、要素の幅のみを考慮し、justify-content: space-between を使用して、分散された中央揃えの効果を実現します。

---

フレックス レイアウトについて詳しく知りたい場合は、マスターのドキュメントを参照してください

フレックス レイアウト チュートリアル: 文法 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

フレックス レイアウトの例

http :/ /static.vgee.cn/static/index.html


関連する推奨事項:
CSS の基本構文 - CSS を導入する 3 つの方法

以上がCSSの基本的な複数列レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。