2.8 gap, row-gap, column-gap
gap属性
是 row-gap
和 column-gap
的缩写,指定了 gutters
的大小,也就是网格、flex和多列布局中行和列之间的空间。gap
属性明确控制弹性项目之间的空间。它仅适用于不在外边缘的项目之间的间距。
.container { display: flex; ... gap: 10px; gap: 10px 20px; /* row-gap column gap */ row-gap: 10px; column-gap: 20px; }
<input type="range" min="0" max="10" step="0.1" value="1"> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
3、Flex 项目(Items)属性
3.1 order
order
用来定义子元素的排列顺序,可以取任意整数,默认为0,数值越小越靠前。默认情况下,弹性项目按源代码顺序排列。但是,该order
属性控制它们在 flex 容器中出现的顺序。
.item { order: 5; /* default is 0 */ }
相同的项目order
恢复到源顺序。
3.2 flex-grow
flex-grow
用来设置项目在 flex 容器中分配剩余空间的相对比例。默认为0,表示如果存在剩余空间也不放大。
剩余空间是
flex
容器的大小减去所有flex
项的大小加起来的大小。如果所有项目都flex-grow
设置为1
,则容器中的剩余空间将平均分配给所有项目。如果其中一个项目的值为2
,则该项目将占用其他孩子的两倍空间(或者至少会尝试)。
.item { flex-grow: 4; /* default 0 */ /* <number> 值 */ flex-grow: 3; flex-grow: 0.6; /* 全局值 */ flex-grow: inherit; flex-grow: initial; flex-grow: revert; flex-grow: unset; }
注意:设置为负数的无效的。flex-grow
与其他的 flex 属性flex-shrink
和flex-basis
一起使用,通常使用flex
来简写定义,以确保所有的值都被设置。
<div id="content"> <div class="box" style="background-color:red;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:yellow;">C</div> <div class="box1" style="background-color:brown;">D</div> <div class="box1" style="background-color:lightgreen;">E</div> <div class="box" style="background-color:brown;">F</div> </div>
3.3 flex-shrink
flex-shrink
属性指定了 flex
元素的收缩规则。flex
元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink
的值。默认为 1
,即如果空间不足会自动缩小。
.item { flex-shrink: 3; /* default 1 */ flex-shrink: 2; flex-shrink: 0.6; /* Global values */ flex-shrink: inherit; flex-shrink: initial; flex-shrink: unset }
注意:设置为负数的无效的。
3.4 flex-basis
flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing
改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。默认为auto,即根据内容自适应。
备注: flex-basis 简史
- 最初,
"flex-basis:auto"
的含义是 "参照我的width
和height
属性".- 在此之后,
"flex-basis:auto"
的含义变成了自动尺寸,而"main-size"
变成了 "参照我的width
和height
属性"。实际执行于 bug 1032922.- 然后呢,这个更改又在 bug 1093316 中被撤销了,所以
"auto"
变回了原来的含义; 而一个新的关键字'content'
变成了自动尺寸。 (bug 1105111 包括了增加这个关键字).
.item { flex-basis: | auto; /* default auto */ /* 指定<'width'> */ flex-basis: 10em; flex-basis: 3px; flex-basis: auto; /* 固有的尺寸关键词 */ flex-basis: fill; flex-basis: max-content; flex-basis: min-content; flex-basis: fit-content; /* 在 flex item 内容上的自动尺寸 */ flex-basis: content; /* 全局数值 */ flex-basis: inherit; flex-basis: initial; flex-basis: unset; }
备注: 当一个元素同时被设置了 flex-basis
(除值为 auto
外) 和 width
(或者在 flex-direction: column
情况下设置了height
) , flex-basis
具有更高的优先级。如果设置为0
,则不考虑内容周围的额外空间。如果设置为auto
,则根据其flex-grow
值分配额外空间。看这张图。
3.5 flex
flex
是 flex-grow
、 flex-shrink
和 flex-basis
的简写形式,默认值为 0 1 auto。第二个和第三个参数(flex-shrink
和flex-basis
)是可选的。
flex
属性的默认值为0 1 auto
,但如果您将其设置为单个数值,例如flex: 5;
,则会将flex-basis
更改为0%
,因此等价于设置flex-grow: 5; flex-shrink: 1; flex-basis: 0%;
。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
3.6 align-self
align-self
会对齐当前 flex
行中的元素,并覆盖已有的 align-items
的值。在网格中,它使项目在网格区域内对齐。在 Flexbox 中,会按照 交叉轴(当前 flex 元素排列方向的垂直方向)进行排列。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
4、Flex 布局和 Grid 布局之间的区别
flexbox
和 grid
之间有很多相似之处,在前端布局中比之前出现的任何布局技术都强大得多。它们可以拉伸和收缩,可以居中,可以重新排序,可以对齐等待。下面我们看看它们之间有什么差异:
4.1 Flexbox 可以选择性地换行
如果我们允许 flex
容器换行,当 flex
项目填满一行时,它们将换行到另一行。它们在下一行的排列位置与第一行发生的情况无关,从而呈现出类似砖石结构的外观。
网格也可以选择换行(如果我们允许自动填充),因为项目可以填充一行并移动到新行(或自动放置它们自己),但是当它们这样做时,它们将沿着相同的网格线排列元素做。
4.2 Flex 是一维布局,而 Grid 是二维布局
虽然 flexbox
可以在允许元素换行,某种意义上创建了行和列这种二维布局,但无法以声明方式控制元素的最终位置,因为元素仅沿单个轴排列,然后相应地换行或不换行。如果主轴够长的话,它们会沿着一维平面做它们做的事情,这是因为我们可以选择做一些事情的单一维度,比如沿基线对齐元素——这是网格无法做到的。
.parent { display: flex; flex-flow: row wrap; /* OK elements, go as far as you can on one line, then wrap as you see fit */ }
你可以将网格视为”二维“,因为我们可以声明行和列的大小,然后根据我们的选择明确地将内容放入行和列中。
.parent { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 200px auto 100px; grid-template-areas: "header header header" ". main sidebar" "footer . ."; } .child-1 { grid-area: header; } .child-2 { grid-area: main; } .child-3 { grid-area: sidebar; } .child-4 { grid-area: footer; }
网格主要是在父元素上定义的。在 flexbox
中,大部分布局(超出最基本的布局)都发生在 children
上。
.flexbox { display: flex; > div { &:nth-child(1) { // logo flex: 0 0 100px; } &:nth-child(2) { // search flex: 1; max-width: 500px; } &:nth-child(3) { // avatar flex: 0 0 50px; margin-left: auto; } } } .grid { display: grid; grid-template-columns: 1fr auto minmax(100px, 1fr) 1fr; grid-template-rows: 100px repeat(3, auto) 100px; grid-gap: 10px; }
4.3 Grid 更擅长重叠
让元素在 flexbox
中重叠需要查看传统的东西,如负边距、transforms
或绝对定位,以打破 flex
行为。使用网格,我们可以将项目放置在重叠的网格线上,甚至可以放在完全相同的网格单元格中。
4.4 Grid 更稳固
虽然 flexbox
的灵活性有时是它的优势,但一个 flex项目
的大小是相当复杂的。它是width
、min-width
、max-width
、flex-basis
、flex-grow
和flex-shrink
的组合,更不用说里面的内容和留白等事项,以及同一行的其他项目。网格有有趣的空间占用功能,比如小数单位,以及内容打破网格的能力,不过,一般来说,我们是在设置网格线,并在其中放置项目,这些项目会直接到位。
4.5 Flex 可以把东西推开
这是 flexbox
的一个相当独特的功能,例如,你可以在一个元素上放 margin-right: auto;
,如果有空间的话,这个元素会把其他东西推得越远越好。
4.6 用 Flex 还是 Grid ?
有个推特大佬说的挺好:
意思是:Flexbox是用于对齐。CSSGrid是用来布局的。
当你心里已经有了布局结构时,就使用
Grid 布局
,而当你只想让所有东西都fit
时,就使用Flex 布局
。布局优先 vs 内容优先。
5、推荐几个可视化学习 Flexbox 布局的站点
end~