大家好，欢迎来到IT知识分享网。

前言

对于Flex布局，在之前我用的最多的无非是justify-content:center和align-items:center这两个属性，对其他的属性知之甚少，最近也看了不少关于Flex布局的博文，自己整理之后，决定写下这篇博客，以便之后学习。

Flex布局是什么

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定Flex布局：

.cloud-box { 
   
	display: flex;
}

也可以将行内元素作为一个容器：

.cloud-box { 
   
	display: inline-flex;
}

修改父元素display:flex，div自动就排列成了一行，没有浮动之后的副作用，从回流角度考虑，flex的性能更优于float。

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

Flex属性主要由容器属性和项目属性构成，下面会分别讲到这两个属性。

1. 容器属性

1.1 flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

row(默认): 主轴为水平方向，起点在左端

row-reverse: 主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿

column-reverse：主轴为垂直方向，起点在下沿

1.2 flex-wrap属性

取值：nowrap(默认) | wrap | wrap-reverse

nowrap（默认）：不换行
举个栗子：box容器的宽度为150px，容器中有5个宽度为50px的项目，nowrap的情况下，项目会强制等分，不换行，因此，每个项目的宽度就会变为30px，而非之前的50px。

wrap：换行，第一行在上方

wrap-reverse：换行，第一行在下方
需要注意的是第一排会紧贴容器底部，而不是我们想象的项目4、5紧贴容器顶部，效果与wrap相反。

1.3 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

1.4 justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly

flex-start: 左对齐

flex-end: 右对齐

center: 居中

space-between: 两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。

)
space-around: 每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

1.5 align-items属性

取值：stretch(默认) | flex-start | flex-end | center | baseline

stretch: 如果项目未设置高度或者设为 auto，将占满整个容器的高度。

flex-start: 交叉轴的起点对齐，会让项目在纵轴紧贴容器顶部

flex-end: 交叉轴的终点对齐，会让项目在纵轴紧贴容器底部

center: 交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

1.6 align-content属性

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用
flex-wrap 设置为 nowrap 的时候，容器仅存在一根轴线，因为项目不会换行，就不会产生多条轴线。
flex-wrap 设置为 wrap 的时候，容器可能会出现多条轴线，这时候你就需要去设置多条轴线之间的对齐方式了。

取值：stretch(默认) | flex-start | flex-end | center | space-between | space-around | space-evenly

stretch: 在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。

flex-start ，center，flex-end 与align-items属性表现一致

space-around: 每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍
space-between: 轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙
space-evenly: 项目之间间距与项目到容器之间间距相等

2. 项目属性

Flex布局教程（二）