弹性布局回顾

弹性布局回顾

flex 详解

相关概念：

弹性盒模型

主轴和交叉轴

起始线和终止线

flex容器

flex元素具有的默认特征：

• 元素排列为一行（flex-direction的初始值是row）

• 元素从主轴的起始线开始

• 元素不会在主轴方向拉伸，但是可以缩小

• 元素被拉伸来填充交叉轴大小

• flex-basis属性为auto

• flex-wrap属性为nowrap

flex布局的属性

flex 容器上的属性

属性名	描述	取值	备注
flex-direction	设置主轴的方	row ，row-reverse， column ，column-reverse	默认下是，row
flex-wrap	设置容器内的元素是否换行显示	nowrap， wrap ，wrap-reverse，不常用：inherit，initial，revert，unset，inherit	默认是不会换行的，而且元素会被压缩然后一行显示
justify-content	设置元素在主轴方向上的对齐方式	center, left , right , end ，flex-start，flex-end， space-around，space-between，....
align-items	设置元素在交叉轴上的对齐方式	normal， flex-start, flex-end , start，end ，center，...	(和justify-content类似)
align-content	设置浏览器如何沿着弹性盒子布局的交叉轴在内容项和周围分配空间	start, end , flex-start , flex-end, center, normal, space-between , space-around

简写属性：flex-flow

flex-flow 是 flex-direction和flex-wrap 的简写形式。

特别说明：

align-items和align-content这两个属性都是作用在交叉轴上的。只是align-items设置的是flex元素的对齐方式，而align-content设置的是flex元素和交叉轴上的空白区域的对齐方式。

align-items只管flex元素的对齐方式，如果出现换行，那么每行元素之间的距离都是平均分配的。而align-content属性就是用来设置flex元素和空白区域之间的分配。

align-items只有flex相关的属性值（比如： flex-end, flex-start, center, stretch）,align-content除了这些属性值之外，还具有space相关属性（比如：space-between，space-around，space-evenly）

flex 元素上的属性

属性名	描述	取值	备注
flex-grow	设置flex元素在主轴方向上的尺寸的增长系数，规定了flex-grow项在flex容器中分配剩余空间的相对比例	结合使用，取值为1,2,3等	具体计算方式如下： 某个元素的增长比例 = 当前项的flex-grow的值 / 所有项的flex-grow的值的和 它的取值主要是数值，初始值是0
flex-shrink	表示的是收缩比例。是用来设置flex元素在主轴方向上的尺寸的收缩系数，规定了flex-shrink项在flex容器中被收缩的相对比例	结合使用，取值为1,2,3等	具体计算方式如下： 某个元素的增长比例 = 当前项的flex-shrink / 所有项的flex-shrink的值的总和 它的取值主要是数值，初始值是1
flex-basis	设置flex元素在主轴方向上的初始大小
align-self	设置的仅仅是当前元素在当前行中的对齐方式。align-self会对齐当前grid或flex行中的元素，并覆盖已有的align-items的值。	auto，normal，flex-start，flex-end，center，...
order	设置单个flex元素在视觉顺序中的显示位置	属性值为自然数	默认值为0. 数值越大，越往后排列

简写属性：

flex： flex-grow, flex-shrink, flex-basis的简写。初始值：flex-grow: 0, flex-shrink: 1, flex-basis: auto。

单值：

• 一个无单位数 (): 它会被当作flex: 1 0; 的值被假定为 1，然后 的值被假定为0。

• 一个有效的宽度 (width)值：它会被当作 的值。

• 关键字none，auto或initial.

双值：第一个值必须为一个无单位数，并且它会被当作 的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作 的值。

• 一个有效的宽度值：它会被当作 的值。

三值：

• 第一个值必须为一个无单位数，并且它会被当作 的值。

• 第二个值必须为一个无单位数，并且它会被当作 的值。

• 第三个值必须为一个有效的宽度值，并且它会被当作 的值。

特别说明：

flex-grow是针对每行如果有多余的空间会按照这个设置的值来进行增长。因此对于设置可以换行（flex-wrap: wrap）的情况，如果最后一行的元素按照原来的宽度不能填充整行空间，那么这一行设置了flex-grow属性的元素就会填充剩余空间。

flex-shrink只有在不换行（flex-wrap: nowrap）的情况下才会生效, 因为如果一行放不下换行的方式就不会涉及到剩余空间压缩了。

flex-shrink可以和flex-grow同时使用，因为它们的使用场景是相反的，只会在特定场景下生效，不会冲突。

flex-basis和width的区别：当一个元素同时设置了flex-basis(值为auto除外)和width(方向为column时设置了height), flex-basis优先级更高。但是如何设置了min-width或者max-width。那么它们会同时控制flex-basis。

• flex-basis：100px; min-width: 50px; 最终宽度就是100px;

• flex-basis：100px; max-width: 50px; 最终宽度就是50px;

怎样设置flex item的基本大小？

• 如果设置了flex-basis为auto或者content, 那么flex item的基本大小就是内容的大小。

• 如果设置了flex-basis为0, 那么flex item的基本大小不在空间分配计算的考虑之类。

• 如果设置了flex-basis为不为0的长度单位, 那么flex item的基本大小就是这个设置的长度单位。

flex 布局的应用

导航栏

元素居中

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

绝对底部（补充）

绝对底部的布局在开发中也是比较常见的尤其是在移动端更是非常常见，在出现flex布局之前，实现这类布局效果我们都是用定位来实现的（绝对定位或者固定定位），但是使用这些方式有一些很明显的弊端：

1. 使用绝对定位的时候去找它的包含块设置相对定位是一个很麻烦的过程。

2. 这两个定位都是脱离文档流，也就是说如果不给页面底部留一段空白，很容易造成绝对底部的内容遮挡页面底部的内容。

其实这类布局也可以使用flex布局来实现，这样就能避免这些问题的发生。但是这种方式有一个问题，flex的容器必须有一个高度，否则容器的高度是根据内容来的，就不能达到位于底部了。所以这类布局只适合高度固定的页面布局中。而且针对那种固定在页面底部的布局也不适用。 总而言之：这类flex也不能完全替代上面介绍的绝对底部的页面布局，在实际项目需求中还是要根据场景去选则布局方式。

媒体对象

表单控制按钮

多列布局

多列布局是我们布局方式中非常常见的一种布局方式。可以细分为单列布局，两列布局，三列布局，多列布局等等。