前端基础flex弹性盒子弹性布局详解及用法

我们通常看到的网页结构大概有这么几种:

使用Flex 布局就可以简便、完整、响应式地实现各种页面布局。
任何一个容器都可以设置弹性布局，行内块也可以

.box{
  display: flex;
}

注意： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

flex属性:

flex-direction:用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

取值	含义
column	显示为列
column-reverse	显示为列。但方向和column属性值是反的
row	默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse	显示为行。但方向和row属性值是反的

flex-wrap：用来控制子项整体单行显示还是换行显示

取值	含义
nowrap	默认值，表示单行显示，不换行。
wrap	宽度不足换行显示
wrap-reverse	宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面

flex-flow：是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性，第一个值表示方向，第二个值表示换行，中间用空格隔开。

justify-content：决定了主轴方向上子项的对齐和分布方式

取值	含义
flex-start	默认值，表现为起始位置对齐。
flex-end	表现为结束位置对齐。
center	表现为居中对齐。
space-between	表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around	around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly	evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

align-items：指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式

取值	含义
stretch	默认值，flex子项拉伸。
flex-start	表现为容器顶部对齐。
center	表现为垂直居中对齐。
flex-end	表现为容器底部对齐。
baseline	项目的第一行文字的基线对齐

align-content：可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

取值	含义
stretch	默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。
flex-start	表现为起始位置对齐
center	表现为居中对齐。
flex-end	表现为结束位置对齐。
space-between	表现为两端对齐
space-around	每一行元素上下都享有独立不重叠的空白空间
space-evenly	每一行元素都完全上下等分

作用在flex子项上的属性

取值	含义
order	可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
flex-grow	属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空白间隙。默认值为0
flex-shrink	属性中的shrink是“收缩”的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值是1。
flex-basis	定义了在分配剩余空间之前元素的默认大小。
flex	是flex-grow，flex-shrink和flex-basis的缩写
align-self	align-self指控制单独某一个flex子项的垂直对齐方式