【CSS】flex 实现三栏等分布局

旺旺大力包

已于 2023-12-21 22:42:37 修改

阅读量3.2k

点赞数 1

分类专栏： CSS 文章标签： css html css3

于 2023-04-12 21:17:05 首次发布

本文链接：https://blog.csdn.net/leoxingc/article/details/130116589

版权

CSS 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

    <ul>
      <li>左</li>
      <li>中</li>
      <li>右</li>
    </ul>

将下列布局三等分如下图：

方法一：

父子元素宽度设为相等宽度；

父元素： display: flex;

子元素： flex：auto；（即 flex: 1 1 auto;）

解析：可以看到width的设置，ul 和 li 均是600px，但是实际看到的确实li平分了ul的宽度，这是因为设置了flex：auto，代表有剩余空间的话项目等分剩余空间放大，空间不足项目等比例缩小；

    <style>
      * {
        list-style: none;
        border: 0;
        padding: 0;
        margin: 0;
      }
      ul {
        width: 600px;
        height: 200px;
        background: rgb(71, 177, 209);
        padding: 0 10px;

        display: flex;
        margin: auto;
        align-items: center;
      }
      li {
        background: rgb(250, 250, 250);
        width: 600px;
        height: 100px;

        margin: 10px;
        line-height: 100px;
        text-align: center;
        flex: auto;
      }
    </style>

方法二：

父子元素宽度设为相等宽度；

父元素： display: flex;

子元素： flex：1 1 33.33%；

    <style>
      * {
        list-style: none;
        border: 0;
        padding: 0;
        margin: 0;
      }
      ul {
        width: 600px;
        height: 200px;
        background: rgb(71, 177, 209);
        padding: 0 10px;

        display: flex;
        margin: auto;
        align-items: center;
        margin-top: 200px;
      }
      li {
        background: rgb(250, 250, 250);
        width: 600px;
        height: 100px;

        margin: 10px;
        line-height: 100px;
        text-align: center;
        flex: 1 1 33.33%;
      }
    </style>

效果如下图：