flex布局以及grid布局

最新推荐文章于 2025-07-10 15:01:28 发布

原创最新推荐文章于 2025-07-10 15:01:28 发布 · 1.9k 阅读

35 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

flex布局

1、主轴和交叉轴（图示）

2、弹性布局

flex-direction

更改 flex 容器中元素的排列方向或主轴。

row(默认值)：从左到右
row-reverse：从右到左
column：从上到下，主轴和交叉轴交换。
column-reverse：从下到上，主轴和交叉轴交换。

justify-content

元素在主轴方向上对齐方式。

flex-start(默认值)：元素靠齐主轴的起始点。
flex-end：元素靠齐主轴的终止点。
center：元素在主轴的中心。
space-between：相邻元素的间距相同，首位元素在起始点、终止点靠齐。
space-around：每个元素自身的左右留白相等
图示:

align-items

元素在交叉轴方向对齐方式和空间分配。

stretch(默认值)：拉伸元素高度来填满 flex 容器。
flex-start：元素靠齐交叉轴的起始点。
flex-end：元素靠齐交叉轴的终止点。
center：元素在交叉轴的中心。

flex-wrap

虽然flexbox是一维模型，但可以通过该属性使flex元素溢出时换行。

no-wrap(默认值)：无论有多少元素，都不换行，元素会被挤小。
wrap：容器放不下元素时，换行。

注意：指定为wrap时，应该把每一行看作一个新的flex容器，并且每行拥有自己的主轴和交叉轴。

align-content

当flex容器为wrap并且出现换行时，指定多根主轴（每行）在flex容器中交叉轴方向上的对齐方式。

flex-start(默认值)：每根主轴靠齐容器交叉轴方向的起始点。
flex-end：每根主轴靠齐容器交叉轴方向的终止点。
center：每根主轴在容器交叉轴方向的中心。
space-between：相邻主轴的间距相同，首位元素在起始点、终止点靠齐。
space-around：每个主轴自身在容器交叉轴方向留白相等

3、平均分布

flex

如果元素在flex容器中，可以设定其flex值，最终容器中的元素所占大小即元素之间的flex值比例。

若只有容器中一个元素，则占满；若只有容器中只有一个元素设定了flex，则该元素占满剩余空间。

<style>
    .layout-flex{
        display: flex;
        height: 100px;
    }
    .flex-1{
        flex: 1;
        background-color: red;
    }
    .flex-2{
        flex: 2;
        background-color: green;
    }
</style>
<body>
    <div class="layout-flex">
        <div class="flex-1"></div>
        <div class="flex-2"></div>
    </div>
</body>

效果

与之相关的有grid布局

grid布局

设置display:grid;将一个标签设置为grid容器，通过设置网格数量和大小，内部的子元素会自动按序填入网格中。

属性

grid-template-rows：指定网格行数。

值：

多个空格隔开的长度（单位：% px）：列数等于参数量，按顺序指定每一列的宽度。
repeat(列数, 大小)：快速设置列数与大小。
- 列数：数字
- 大小：px、fr(每列之间的比例)

grid-template-columns：指定网格列数。

值：

多个空格隔开的长度（单位：% px）：列数等于参数量，按顺序指定每一列的宽度。
repeat(列数, 大小)：快速设置列数与大小。
- 列数：数字
- 大小：px、fr(每列之间的比例)

gap：网格之间的间距。（flex也可使用）

<style>
    .grid {
        width: 100%;
        height: 200px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    span {
        display: inline-block;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        background-color: aqua;
    }
</style>
<body>
    <div class="grid">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

效果: