css布局 弹性布局介绍 以及 flex容器属性

　　语法:

display: flex;

　　设置弹性布局需要注意的四点:

　　1.当给一个元素设置了display:flex;后，该容器就成为了弹性盒;

　　2.当容器设置了flex后，子元素的float、clear、vertical-align将会失效;

　　3.我们把设置display:flex;的元素称之为flex容器，把里面的子元素称为flex项目;

　　4.当给元素设置了flex布局后，随之产生两根轴线:主轴和交叉轴。

　　flex容器属性

　　1.设置主轴的方向

　　语法:

flex-direction: row | row-reverse | column | colum-reverse;

　　①row:默认值，主轴在水平方向，起点在左端

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

　　③column:主轴在垂直方向，起点在上沿

　　④column-reverse:主轴在垂直方向，起点在下沿

　　2.设置了flex项目一行显示还是多行显示

　　语法:

flex-wrap: nowrap | wrap | wrap-reverse;

　　①nowrap:默认值，flex项目在一行显示，不换行

　　②wrap:换行

　　③wrap-reverse:换行，行的顺序会倒过来

　　注:此属性主要用在主轴在水平方向时，flex项目一行放不下，又不希望flex项目缩小。

　　3.flex-direction和flex-wrap的简写方式

　　语法:

flex-flow: row nowrap;

　　4.设置主轴的对齐方式

　　语法:

justify-content: flex-start | flex-end | center | space-between | space-around;

　　①flex-start类似于左浮动

　　②flex-end类似于右浮动

　　③center flex项目居中对齐

　　④space-between两端对齐容器，flex项目间距相等

　　⑤space-around flex项目两侧间隔相等

　　5.设置交叉轴的对齐方式

　　语法:

align-items: flex-start | flex-end | center | baseline | stretch;

　　①flex-start对齐交叉轴的起点

　　②flex-end对齐交叉轴的终点

　　③center以交叉轴为参考，居中对齐

　　④baseline flex项目第一行文字基线对齐

　　⑤stretch如果flex项目没有定义高度或为auto，将占满整个父元素的高度

　　注:如果flex项目没有设置高度，align-items的默认值就为strech

　　6.设置多根轴线对齐方式

　　语法:

align-content: flex-start | flex-end | center | space-between | space-around | stretch;