5.3布局系列——Grid、Flex、Column对比 (多行3列瀑布流项目实战)

用户5478764823586
589 阅读6分钟

本人已参与新人「创作礼活动」，一起开启掘金创作之路。

一、比较 Grid、Flex、Column

  • 层级比较： Grid布局关注宏观，Flex布局关注微观，而Column关注文本内容；Grid > Flex > Column

  • 维度比较： Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局；Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局；Column 内容为一维布局

  • 失效影响： Flex 布局以后，子元素的float、clear和vertical-align属性将失效；Grid 布局，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

二、多行3列瀑布流实例

  • 严格等宽： Grid 与 Flex 都借助计算属性 calc(33.3% -15px)
  • 垂直居中：Grid 布局使用 line-height，Flex布局使用 align-items: center;;
  • 两端对齐：Grid 与 Flex 都使用 justify-content: space-between (grid-template-columns: auto 100px; 与 flex: 1 时可不设置该属性);
  • 列水平间距：Grid 布局使用 grid-gap: 15px，Flex布局使用 margin-right: 15px; margin-bottom: 15px;并结合nth-child(3n)；
  • 行水平间距：Grid 布局不在问题，但FLex布局如果使用margin-bottom时，会在最后一行会有多余的外边距，所以不可以借助nth-last-child(-n + 3)来去除，此处n要写在前面，不然不生效！，原因请见最后的效果截图；但是，可以使用margin-top 并结合 nth-child(-n + 3)来解决该问题；

2.1 Grid 布局

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid 布局</title>
    <style>
        * { padding: 0; margin: 0;}
        .box {
            width: 800px;
            border: 4px dashed gold;

            display: grid;
            grid-template-columns: repeat(3, calc(33.3% - 10px));
            grid-gap: 15px;
        }
        .item {
            background-color: chartreuse;
            border: 2px solid red;
            padding: 10px;
            box-sizing: border-box;
        }
        .title-line {
            line-height: 24px;

            display: grid;
            grid-template-columns: auto 100px;
            justify-content: space-between;
        }
        .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
        }
        .time {
            font-size: 14px;
            color: blue;
            text-align: right;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Grid布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
        </div>
    </div>
</div>
</body>
</html>

2.2 Flex 布局

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局</title>
    <style>
        * { padding: 0; margin: 0;}
        .box {
            width: 800px;
            border: 4px dashed gold;

            display: flex;
            flex-wrap: wrap;
        }
        .item {
            background-color: chartreuse;
            border: 2px solid red;
            padding: 10px;
            box-sizing: border-box;

            width: calc(33.3% - 10px);
            margin-right: 15px;
            margin-bottom: 15px;
        }
        .item:nth-child(3n) {
            margin-right: 0;
        }
        .title-line {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;

            flex: 1;
        }
        .time {
            font-size: 14px;
            color: blue;
            text-align: right;

            width: 100px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            优先推进区域协作，形成工作合力。
        </div>
    </div>
    <div class="item">
        <div class="title-line">
            <span class="title">Flex布局新体验不容错过</span>
            <span class="time">2020-04-11</span>
        </div>
        <div>
            新华社北京4月10日电（记者安蓓、潘洁）《中共中央 国务院关于加快建设全国统一大市场的意见》10日发布。
            建设全国统一大市场是构建新发展格局的基础支撑和内在要求。意见强调，加强党的领导，完善激励约束机制，
        </div>
    </div>
</div>
</body>
</html>

2.2 Grid 分栏

请参见 5.2布局系列——Column多栏文本与垂直律动

要点提示：

FLex布局在最后一行会有多余的margin-bottom，不可以借助nth-last-child(-n + 3)来去除，此处n要写在前面，不然不生效！，原因请见最后的效果截图 image.png

avatar
文章
阅读
粉丝