Flex布局以及Grid布局

ZzXxYy_99

已于 2025-01-18 00:47:57 修改

阅读量1k

点赞数 15

文章标签： css 前端 html

于 2025-01-17 16:55:57 首次发布

本文链接：https://blog.csdn.net/ZzXxYy_99/article/details/145210785

版权

一、Flex布局

1、布局含义

（1）含义：flex布局，也被称之为弹性盒子布局，是CSS3里面新增的一种布局方式，通过使用flex布局，我们可以让布局更加便捷有效。

（2）如何触发弹性盒子：给父元素添加display属性，并且将取值设置为flex

（3）触发后的影响：

子元素默认横向显示（只会影响子元素不影响孙子辈分元素，类似于浮动，但与浮动没有关系）
子元素会默认变成块级元素，能设置宽度高度
如果只有一个子元素的话，则给子元素添加margin：auto的时候会让子元素直接实现水平垂直正居中显示

2、 flex布局中的基本概念

（1）flex容器:采用flex布局的元素的父元素

（2）flex项目：采用flex布局容器里面的子元素

（3）横轴（水平轴）：水平方向的轴线

（4）纵轴（垂直轴）：垂直方向轴线

（5）主轴:触发弹性盒子之后，项目的排列方向

（6）侧轴（交叉轴）：触发弹性盒子之后，与主轴对立的方向

注意：触发弹性盒子之后，项目默认沿主轴排列

3、flex布局中的容器属性

（1）触发弹性盒子

display：flex；

（2）修改主轴方向

属性：flex-direction（先触发弹性盒子，再修改主轴方向）

取值：row，默认值就是横向

row-reverse，主轴在横向，项目是反方向排列的（123->321）

column，主轴在纵向，项目正向显示

column-reverse ，主轴在纵向，项目反方向显示

（3）主轴对齐方式

属性：justify-content

取值：flex-start，代表的是主轴的开始位置显示，默认值（项目之间无间距）

flex-end，代表的是主轴的结束位置显示（项目之间无间距）

center，代表的是主轴的居中位置显示（项目之间无间距）

space-between，代表的是主轴两端对齐（两端贴边，中间距离自动）

space-around，代表的是主轴的两端环绕（所有项目左右都有距离）

space-evenly，代表的是主轴的间距均分（中间距离都相等）

（4）交叉轴上的对齐方式

属性：align-items

取值：flex-start，代表位于交叉轴的开始位置显示，默认值

flex-end，代表位于交叉轴的结束位置显示

center，代表位于交叉轴的中间位置显示

baseline，代表位于交叉轴的基线位置显示，效果与flex-start一致，实际开发的时候几乎不会用

stretch，效果为拉伸效果，但是项目前提是没有高度的，或者高度是自适应的

（5）折行属性

没有触发弹性盒子之前，子元素过多的时候，默认会产生溢出效果，元素有自己的宽度和高度。当给父元素触发完弹性盒子之后，子元素会横向显示，没有折行，并且原有宽度被挤压

实现折行效果：

属性：flex-wrap

取值：nowrap，默认值不折行

wrap，折行显示

折行后出现的问题：

右侧会有留白：因为右侧区域留白放不下一个项目了，只能折行显示

行与行之间有间距：因为项目设置了固定高度，如果没有高度，高度默认为拉伸效果，高度均分在每一行中

（6）调整行间距

如果项目过多，添加折行后，项目之间会有较大行间距

属性：align-content

取值：flex-start，会实现在侧轴的开始位置显示，没有行间距

flex-end，会实现在侧轴的结束位置显示，没有行间距

center，会实现在侧轴的居中位置显示，没有行间距

space-between，会实现在侧轴的两端对其位置显示（首行和尾行贴边显示，中间间距自动平分）

space-around，会实现在侧轴的行间距环绕（每一行上下都有间距）

space-evenly，会实现侧轴行间距均分

4、flex布局中的项目属性

（1）单独调整侧轴对齐方式

可以让不同的元素位于不同的位置显示

属性：align-self

取值：flex-start，侧轴开始位置

flex-end，侧轴结束位置

center，侧轴的居中位置

baseline，侧轴的基线位置（与flex-start效果一致，一般不使用）

stretch，侧轴默认拉伸（要把高度取消）

（2）调整顺序

属性：order（取值就是为数值）

取值：默认order取值为auto，可以理解为0；

order取值可以为正数，可以为负数，取值越大越靠后

（3）占剩余宽度剩余高度所有

占剩余空间的所有：

flex：1，来实现

主轴在横向时：

如果项目不设置高度的话，默认高度是拉伸的，

项目添加flex：1实习的是占剩余宽度的所有

主轴在纵向时：

如果项目不设置宽度的话，默认宽度是拉伸的，

项目添加flex：1实现的是占剩余高度的所有

（4）不挤压不折行

flex属性是一个复合属性，是由：

flex-grow、flex-shrink、flex-basis三个属性的缩写

flex-grow：定义项目的放大比例；

默认为0，即即使存在剩余空间也不会放大；

所有项目的flex-grow为1：等分剩余空间（自动放大占位）；

flex-grow为n项目，占据的空间（放大的比例）是flex-grow为1的n倍

flex-basis：定义在分配多余空间之前，项目占据的主轴空间（main size）

浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值，默认值为auto

flex-shrink：定义项目缩小比例，取值0/1

主要用于：制作移动端横向滚动区域

二、Grid布局

1、grid布局含义

（1）含义：Grid布局，也被称之为网格布局，是将页面的父元素划分成一个个小的格子，然后通过这些小的格子进行合并来制作各种不同的网站效果

（2）如何触发网格：给父元素添加display属性，并且将取值设置成：grid/inline-grid

grid：代表的是块状网格，默认独占一行，类似于块级元素

inline-grid：代表的是行内块网格，与行内块元素类似

（3）特点：划分行列之后，才能将里面的区域进行划分，才能显示网格

（4）grid布局与flex布局异同，网格与表格区别

grid与flex布局：相同点：都有容器和项目之分

不同点：flex被称之为一维布局，也叫做轴线布局；grid被称之为二维布局，有行列之分

grid与表格：相同点：都有行列之分，都能划分格子

不同点：代码嵌套

2、grid布局中的基础概念

grid容器：采用grid布局的父元素

grid内容：显示项目的区域

grid项目：grid布局中每一个格子内部放置的内容

行：横向

列：纵向

网格线：网格布局中的横向的纵线的线条

单元格：横纵线交汇的区域

间距：网格与网格之间的距离被称为间距

一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成

3、grid布局中的容器属性

（1）触发网格

display：grid；

display：inline-grid；

（2）划分行列属性

行属性：grid-template-rows

列属性：grid-template-columns

研究的是他们的取值，后面跟几组取值，就代表几行几列

1）纯数值

例如：{

grid-template-rows：100px 100px 100px；

grid-template-columns：100px 100px 100px；

}

代表的是，划分一个3行3列的网格；每一行行高：100px；每一列列宽：100px；

2）百分比

例如：{

grid-template-rows：20% 30% 50%；

grid-template-columns：100px 100px 100px；

}

代表的是，划分一个3行3列的网格；每一行行高：分别是总高的20%30%50%；每一列列宽：100px；

3)重复函数

重复函数：使用的是repeat（num1，num2）函数，

两个参数：参数1：重复次数

参数2：需要重复的数值

例如：{

grid-template-rows：repeat（3，100px）；

grid-template-columns：repeat（5，20%）；

}

代表的是，划分一个3行5列的网格；每一行行高：100px；每一列列宽：均占总宽度的20%；

注意：repeat函数，第一个参数是重复次数，第二个参数为需要重复的数值

4）自动填充

auto-fill

应用在重复函数中，代表的是根据重复的数值，进行自动填充数量

例如：{

grid-template-rows：repeat（3，100px）；

grid-template-columns：repeat（auto-fill，30%）；

}

注意：在这里auto-fill会将列数宽度按照30%的宽度进行划分；盛放不下的话则不在划分列数

5）auto自动

auto自动代表的是，占剩余宽度和剩余高度的所有

例如：{

grid-template-rows：100px auto 100px；

grid-template-columns：auto 100px auto；

}

代表的是，划分一个3行3列的网格；第1、3行固定高度100px；第2行高度自适应；第2、3列固定宽度100px；第1列宽度自适应

6）fr片段划分

片段划分：为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写）

如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

例如：{

grid-template-rows：1fr 2fr 3fr；

grid-template-columns：100px 100px 100px；

}

代表的是，划分一个3行3列的网格；其中行高总划分成6份，第1行占1/6；第2行占2/6；第3行占3/6；每一列宽度为100px

7）minmax（）

minmax（num1，num2）函数，可以理解成最小最大值函数，函数中两个参数；参数1代表的是最小值，参数2代表的是最大值；

如果条件允许，则一直使用最大值，如果条件不满足则使用中间值，如果剩下的距离不足以显示距离大小，则使用最小值

（3）调整间距属性

行间距属性：grid-row-gap

列间距属性：grid-column-gap

简写：grid-gap：num1 num2；第一个参数代表行间距，第二个参数代表列间距

（4）添加项目-调整顺序

添加项目：

如果想要给网格中添加项目，我们需要在容器中添加对应的div，这些div被称之为项目，项目会默认自动撑开显示在单元格内部

添加完对应的项目之后，默认项目是横向依次由左向右进行显示，第一行显示完毕才会在第二行显示

调整顺序：

属性：grid-auto-flow

取值：row：横向显示

column：纵向显示

（5）项目对其方式

水平对其方式：justify-items

取值：start，项目位于水平方向的开始位置

center，项目位于水平方向的中间位置

end，项目位于水平方向的结束位置

垂直对其方式：align-items

取值：start，项目位于垂直方向的开始位置

center，项目位于垂直方向的中间位置

end，项目位于垂直方向的结束位置

另有一个默认值就是stretch拉伸效果

对应的复合属性实现：

place-items：align-items justify-items

第一个取值代表垂直方向，第二个取值代表水平方向

（6）网格位于容器的随其方式

默认情况下网格位于容器左上角位置显示，我们可以使用：

水平方向对其属性：juestify-content

取值：start，网格位于容器水平方向的开始位置

center，网格位于容器水平方向的中间位置

end，网格位于容器水平方向的结束位置

垂直方向对其属性：align-content

取值：start，网格位于容器水平方向的开始位置

center，网格位于容器水平方向的中间位置

end，网格位于容器水平方向的结束位置

对应的复合属性实现：

place-content：align-content justify-content

第一个取值代表垂直方向，第二个取值代表水平方向

注意对应的：

stretch：代表拉伸默认值

space-around：行列间距环绕

space-between：行列两端对其

space-evenly:行列间距平分

4、grid布局中的项目属性

（1）合并单元格属性

合并单元格：是将划分好的网格，通过让元素使用网格线占位的形式，来达到合并的效果

属性：

grid-column-start 纵向网格线开始占位

grid-column-end 纵向网格线结束占位

grid-row-start 横向网格线开始占位

grid-row-end 横向网格线结束占位

简化：grid-row：1/3

grid-column：2/4