本文共 1603 字，大约阅读时间需要 5 分钟。

首先我们要知道什么是flex布局，他其实就是Flexible Box的缩写，表示弹性盒子布局，将盒子状态提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称**“容器”** 可以把任何盒子都设置成flex布局，flex拥有比较多的属性，可以用来设置多样布局，任何一个采用flex布局的盒子都可以成为容器，再flex布局的子元素就被成为项目 容器的六个属性： lex-direction flex-wrap flex-flow justify-content align-items align-content 例如属性有：（首先要真对父元素设定一个display：flex属性）

div{
   	display：flex}

//换行	flex-wrap=warp	//不换行	flex.wrap=nowrap	//向上换行，第一行位于下方	wrap-reverse	//设计容器主轴方向	flex-direction	//有四个默认属性    row: 默认值，表示沿水平方向，由左到右。    row-reverse ：表示沿水平方向，由右到左    column：表示垂直方向，由上到下    column-reverse:表示垂直方向，由下到上	justify-content属性用于设置项目在容器中的对齐方式。	五个属性值：	1，flex-start：默认值，左对齐	2，flex-end：右对齐	3，center：居中对齐	4，space-between：两端对齐	5，space-around：每个项目两侧的间距相等	 align-items属性定义项目在交叉轴上如何对齐。	//取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。	1.flex-start：交叉轴的起点对齐。	2.flex-end：交叉轴的终点对齐。	3.center：交叉轴的中点对齐。	4.baseline: 项目的第一行文字的基线对齐。	5.stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。	 align-content属性	//align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。   	//能取6个值。 	flex-start：与交叉轴的起点对齐。	flex-end：与交叉轴的终点对齐。	center：与交叉轴的中点对齐。	space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。	space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。	stretch（默认值）：轴线占满整个交叉轴。

项目的属性

6个属性设置在项目上。 order flex-grow flex-shrink flex-basis flex align-self

// order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。//flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。//flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。//flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。//flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。//align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

转载地址：http://lzylf.baihongyu.com/