一、flex
flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿
flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap(默认):不换行。wrap:换行,第一行在上方。wrap-reverse:换行,第一行在下方。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items属性
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
二、grid
Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。
块级容器(宽度撑满整行)时 display: grid
行内容器(宽度随内容自适应)时 display: inline-grid;
使用网格布局后,项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
在容器内划分出3列,每列宽度为100px
grid-template-columns: 100px 100px 100px;
将容器等分为3列,每列宽度为容器总宽度/3
grid-template-columns: 33.33% 33.33% 33.33%;
将容器划分为2列,第1列的宽度 :第2列的宽度 = 1:2
grid-template-columns: 1fr 2fr;
fr 是fraction 的缩写,意为"片段",可以与绝对长度的单位结合使用
grid-template-columns: 150px 1fr 2fr;
minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px,不大于1fr。
repeat()接受两个参数,第一个参数是重复的次数,第二个参数是要重复的值。
grid-template-columns: repeat(3, 33.33%);
一列三等分
grid-template-columns: repeat(2, 100px 20px 80px);
第一列和第四列的宽度为100px,第二列和第五列为20px,第三列和第六列为80px。
划分行 grid-template-rows
grid-template-rows: 100px 100px 100px;
或
grid-template-rows: 33.33% 33.33% 33.33%
设置行间距 row-gap
row-gap: 20px;
设置列间距 column-gap
column-gap: 30px;
gap是column-gap和row-gap合并的简写形式
gap: 20px 30px;
如果gap省略了第二个值,浏览器认为第二个值等于第一个值。
实际案例
<div class="complaint-overview">
<div style="grid-column: 1 / span 3">111</div>
<div>222</div>
<div>333</div>
<div>444</div>
</div>
.complaint-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
使用span关键字时,它指定了元素应该跨越的列数。所以,grid-column: 1 / span 3;意味着该元素从第一列开始,并跨越接下来的三列(即实际占据第1、2、3列)。
display: grid;
这个属性被设置在一个容器元素上,以将其布局方式改为Grid布局。一旦一个元素被设置为Grid布局,它的直接子元素就可以使用Grid布局的属性来定位和排列。
grid-template-columns: repeat(3, 1fr);
这个属性定义了Grid容器中列的大小和数量。repeat(3, 1fr);的意思是创建三列,每列的大小都相等,使用fr单位进行分配。fr是一个灵活的单位,表示网格容器中可用空间的一份。因此,如果容器宽度为100%,则这三列将各占约33.33%的宽度。
grid-template-rows: repeat(2, 1fr);
类似于grid-template-columns,这个属性定义了Grid容器中行的大小和数量。repeat(2, 1fr);意味着创建两行,每行的大小都相等,各占约50%的容器高度(如果容器高度为100%的话)。
gap: 10px;
这个属性是row-gap和column-gap的简写,用于在Grid容器的行和列之间设置间隙。gap: 10px;表示行和列之间的间隙都是10像素。这个属性在改善Grid布局的可读性和美观性方面非常有用。
这些属性共同工作,以在一个父容器中定义一个3x2的Grid布局,其子元素可以根据需要跨越不同的列。