flex 浏览器兼容性

1.任何容器都可以设置 flex

.Box{display:flex}
.line{dispaly: inline-flex;dispaly:-webkit-flex}

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

2.设置flex的容器 （简称：容器），里面的内容称为 项目

3.容器有6个属性分别是：flex-direction | flex-wrap | flex-flow | justify-content | align-items | align-content

(1)flex-direction:项目的主轴方向 row （默认值） {水平方向，由左向右}| row-reverse{水平反方向} |column {垂直方向，由上向下} |column-reverse{垂直反方向}

(2) flex-wrap:项目换行no-wrap(默认值){不换行} |wrap{换行，超出向下排} | wrap-reverse

(3)flex-flow: flex-direction和 flex-wrap的简写

(4) justify-content:水平方向 项目的排列 flex-start {默认值，左对齐} |flex-end {右对齐} | center {居中} | space-between {两端对齐， 间隔相等} | space-around {项目两侧的间隔相等}

(5)align-items：项目在垂直方向的对齐方式。 flex-start {交叉轴的起点开始} | flex-end {交叉轴的末尾开始} |baseline {项目第一行的文字的基线对齐} | stretch （默认）未设置的高度或者auto 将占满整个高度

(6) align-content:定义多个轴的的对齐方式，如果项目只有一根轴线，该属性不起作用