前言

给div这类块状元素元素设置display:flex或者给span这类内联元素设置display:inline-flex,flex布局即创建。
其中,直接设置display:flex或者display:inline-flex的元素称为flex容器,里面的子元素称为flex子项。

//flex和inline-flex区别在于,inline-flex容器为inline特性,因此可以和图片文字一行显示;flex容器保持块状特性,宽度默认100%,不和内联元素一行显示。
而Flex布局相关属性正好分为两拨,一拨作用在flex容器上,还有一拨作用在flex子项上。具体参见下表,点击可快速索引。

Flex布局相关属性正好分为两拨,一拨作用在flex容器上,还有一拨作用在flex子项上。

作用在flex容器上的有:flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
作用在Flex子项上的有:order、flex-grow、flex-shrink、flex-basis、flex、align-self
无论作用在flex容器上,还是作用在flex子项,都是控制的flex子项的呈现,只是前者控制的是整体,后者控制的是个体。

作用在flex容器上的两个属性

1.flex-direction

flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。和CSS的direction属性相比就是多了个flex。
语法如下:
flex-direction: row | row-reverse | column | column-reverse;

其中:

  • row:默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。如果当前水平文档流方向是rtl(如设置direction:rtl),则从右往左。
  • row-reverse:显示为行。但方向和row属性值是反的。
  • column:显示为列。
  • column-reverse:显示为列。但方向和column属性值是反的。

2. flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示,如果换行,则下面一行是否反方向显示。这个属性比较好记忆,在CSS世界中,只要看到单词wrap一定是与换行显示相关的,word-wrap属性或者white-space:nowrap或者pre-wrap之类。

语法如下:
flex-wrap: nowrap | wrap | wrap-reverse;

其中:

  • nowrap:默认值,表示单行显示,不换行。于是很容易出现宽度溢出的场景,其渲染表现比较复杂,需要对CSS3宽度有一定了解,可以阅读“理解CSS3 max/min-content及fit-content等width值”这篇文章。具体表现如下(以水平布局举例):flex子项最小内容宽度min-content之和大于flex容器宽度,则内容溢出,表现和white-space:nowrap类似。如果flex子项最小内容宽度min-content之和小于flex容器宽度,则:flex子项默认的fit-content宽度之和大于flex容器宽度,则flex子项宽度收缩,正好填满flex容器,内容不溢出。flex子项默认的fit-content宽度之和小于flex容器宽度,则flex子项以fit-content宽度正常显示,内容不溢出。在下面案例中,示意的图片默认有设置max-width:100%,flex子项div没有设置宽度,因此,flex子项最小宽度是无限小,表现为图片宽度收缩显示。如果我们取消max-width:100%样式,则此时flex子项最小宽度就是图片宽度,就可以看到图片溢出到了flex容器之外。
  • wrap:宽度不足换行显示。
  • wrap-reverse:宽度不足换行显示,但是是从下往上开始,也就是原本换行在下面的子项现在跑到上面。

3. flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写,表示flex布局的flow流动特性,语法如下:

flex-flow: <‘flex-direction’> || <‘flex-wrap’>
当多属性同时使用的时候,使用空格分隔。

容器元素如下设置:

.container {
display: flex;
flex-flow: row-reverse wrap-reverse;
}

4. justify-content

justify-content属性决定了水平方向子项的对齐和分布方式。CSS text-align有个属性值为justify,可实现两端对齐,所以,当我们想要控制flex元素的水平对齐方式的时候,记住justify这个单词,justify-content属性也就记住了。

justify-content可以看成是text-align的远房亲戚,不过前者控制flex元素的水平对齐外加分布,后者控制内联元素的水平对齐。

语法如下:
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;

其中:
flex-start:默认值。逻辑CSS属性值,与文档流方向相关。默认表现为左对齐。
flex-end:逻辑CSS属性值,与文档流方向相关。默认表现为右对齐。
center:表现为居中对齐。
space-between:表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
space-around:around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly:evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。

5. align-items

align-items中的items指的就是flex子项们,因此align-items指的就是flex子项们相对于flex容器在垂直方向上的对齐方式,大家是一起顶部对齐呢,底部对齐呢,还是拉伸对齐呢,类似这样。

语法如下:
align-items: stretch | flex-start | flex-end | center | baseline;

其中:
stretch:默认值。flex子项拉伸。在演示中我们可以看到白蓝径向渐变背景区域是上下贯穿flex容器的,就是因为flex子项的高度拉伸到容器高度导致。如果flex子项设置了高度,则按照设置的高度值渲染,而非拉伸。
flex-start:逻辑CSS属性值,与文档流方向相关。默认表现为容器顶部对齐。
flex-end:逻辑CSS属性值,与文档流方向相关。默认表现为容器底部对齐。
center:表现为垂直居中对齐。
baseline:表现为所有flex子项都相对于flex容器的基线(字母x的下边缘)对齐。

6. align-content

align-content可以看成和justify-content是相似且对立的属性,justify-content指明水平方向flex子项的对齐和分布方式,而align-content则是指明垂直方向每一行flex元素的对齐和分布方式。如果所有flex子项只有一行,则align-content属性是没有任何效果的。

语法如下:
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

其中:
stretch:默认值。每一行flex子元素都等比例拉伸。例如,如果共两行flex子元素,则每一行拉伸高度是50%。
flex-start:逻辑CSS属性值,与文档流方向相关。默认表现为顶部堆砌。
flex-end:逻辑CSS属性值,与文档流方向相关。默认表现为底部堆放。
center:表现为整体垂直居中对齐。
space-between:表现为上下两行两端对齐。剩下每一行元素等分剩余空间。
space-around:每一行元素上下都享有独立不重叠的空白空间。
space-evenly:每一行元素都完全上下等分。

作用在flex子项上的CSS属性

1. order

可以通过设置order改变某一个flex子项的排序位置。

语法:
order:; /* 整数值,默认值是 0 */
所有flex子项的默认order属性值是0,因此,如果我们想要某一个flex子项在最前面显示,可以设置比0小的整数,如-1就可。

2. flex-grow

flex-grow属性中的grow是扩展的意思,扩展的就是flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙。具体的扩展比较复杂。

语法:
flex-grow:; /* 数值,可以是小数,默认值是 0 */
flex-grow不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度。如果flex-grow大于0,则flex容器剩余空间的分配就会发生,具体规则如下:

所有剩余空间总量是1。
如果只有一个flex子项设置了flex-grow属性值:

  • 如果flex-grow值小于1,则扩展的空间就总剩余空间和这个比例的计算值。
  • 如果flex-grow值大于1,则独享所有剩余空间。

如果有多个flex设置了flex-grow属性值:

  • 如果flex-grow值总和小于1,则每个子项扩展的空间就总剩余空间和当前元素设置的flex-grow比例的计算值。
  • 如果flex-grow值总和大于1,则所有剩余空间被利用,分配比例就是flex-grow属性值的比例。例如所有的flex子项都设置flex-grow:1,则表示剩余空白间隙大家等分,如果设置的flex-grow比例是1:2:1,则中间的flex子项占据一半的空白间隙,剩下的前后两个元素等分。

3. flex-shrink

shrink是“收缩”的意思,flex-shrink主要处理当flex容器空间不足时候,单个元素的收缩比例。

语法如下:
flex-shrink:; /* 数值,默认值是 1 */
flex-shrink不支持负值,默认值是1,也就是默认所有的flex子项都会收缩。如果设置为0,则表示不收缩,保持原始的fit-content宽度。

flex-shrink的内核跟flex-grow很神似,flex-grow是空间足够时候如何利用空间,flex-shrink则是空间不足时候如何收缩腾出空间。总有点CP的味道。

两者的规则也是类似。已知flex子项不换行,且容器空间不足,不足的空间就是“完全收缩的尺寸”:

如果只有一个flex子项设置了flex-shrink:

  • flex-shrink值小于1,则收缩的尺寸不完全,会有一部分内容溢出flex容器。
  • flex-shrink值大于等于1,则收缩完全,正好填满flex容器。
    如果多个flex子项设置了flex-shrink:
  • flex-shrink值的总和小于1,则收缩的尺寸不完全,每个元素收缩尺寸占“完全收缩的尺寸”的比例就是设置的flex-shrink的值。
  • flex-shrink值的总和大于1,则收缩完全,每个元素收缩尺寸的比例和flex-shrink值的比例一样。下面案例演示的就是此场景。

4. flex-basis

flex-basis定义了在分配剩余空间之前元素的默认大小。相当于对浏览器提前告知:浏览器兄,我要占据这么大的空间,提前帮我预留好。

语法如下:
flex-basis:| auto; /* 默认值是 auto */
默认值是auto,就是自动。有设置width则占据空间就是width,没有设置就按内容宽度来。

如果同时设置width和flex-basis,就渲染表现来看,会忽略width。flex顾名思义就是弹性的意思,因此,实际上不建议对flex子项使用width属性,因为不够弹性。

当剩余空间不足的时候,flex子项的实际宽度并通常不是设置的flex-basis尺寸,因为flex布局剩余空间不足的时候默认会收缩。

5. flex

flex属性是flex-grow,flex-shrink和flex-basis的缩写。

语法:
flex: none | auto | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]
其中第2和第3个参数(flex-shrink和flex-basis)是可选的。默认值为0 1 auto。

flex默认值等同于flex:0 1 auto;
flex:none等同于flex:0 0 auto;
flex:auto等同于flex:1 1 auto;

6. align-self

align-self指控制单独某一个flex子项的垂直对齐方式,写在flex容器上的这个align-items属性,后面是items,有个s,表示子项们,是全体;这里是self,单独一个个体。其他区别不大,语法几乎一样:

align-self: auto | flex-start | flex-end | center | baseline | stretch;
唯一区别就是align-self多了个auto(默认值),表示继承自flex容器的align-items属性值。
.container {
display: flex;
align-items: baseline;
height: 240px;
}

补充

  • 在Flex布局中,flex子元素的设置float,clear以及vertical-align属性都是没有用的。
  • Flexbox布局最适合应用程序的组件和小规模布局(一维布局),而Grid布局则适用于更大规模的布局(二维布局)
-------- 本文结束感谢阅读 --------

这里是评论区,如果你看到这段话,就是没加载出来,刷新一下~


给自己看的flex文章