在传统的css构造，都是依赖于position，float，dosplay进行。在一些特定的构造的实现上往往很未便利，好比一个元素的垂直居中。鉴于这种关系，2009年，W3C 提出了一种新的方案----Flex 构造，可以简便、完整、响应式地实现各类页面构造。目前，它已经得到了所有浏览器的撑持，这意味着，，此刻就能很安适地使用这项成果。

<div>//容器 <div></div>//元素 <span></span>//元素 <img/>//元素 </div>

　　在flex容器内的元素，没有块级元素，行内元素的区别，都是flex元素，可以设置高宽，可以看做没有换行符的块级元素

在flex项目容器和元素分袂都有一些属性值

　　容器

　　flex-direction 决定容器主轴标的目的

　　　　row

　　　　row-severse

　　　　column

　　　　column-reverse

　　flex-wrap 决定多个元素摆列赶过容器最大宽度时，是否换行,如果不换行将会制动缩小，以适应容器

　　　　wrap

　　　　nowrap

　　　　wrap-reverse

　　flex-flow  flex-direction和flex-wrap的缩写

　　justify-content 元素在主轴上的对齐方法

　　　　flex-start

　　　　flex-end

　　　　center

　　　　space-between

　　　　space-around

　　　　space-evenly  元素与元素 和 元素与容器边框 等分残剩空间

　　align-items 元素在交叉轴上的对其方法，默认值为stretch

　　　　flex-start

　　　　flex-end

　　　　center

　　　　baseline 基于项目第一行文字的底部对齐，如果没有设置元素高度，则将元素自适应内容高度

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

　　align-content 元素（多主轴时交叉轴对齐方法，只有一条主轴时无效）

　　　　flex-start

　　　　flex-end

　　　　center

　　　　stretch

　　　　space-between

　　　　space-around

　　元素

　　order:0 数值越小排序越靠前 默认为0

　　flex-grow:0 放大比例，如果还有残剩空间，就将残剩空间分成若干平分，如果有两个元素，一个为1一个为2，那么它们的将分袂占据残剩空间的1/3和2/3。默认为0 即存在空余空间也不放大，

　　flex-shrink：1 属性界说了项目的缩小比例，默认为1，即如果空间不敷，该项目将缩小。值越大，缩小的越多，如果为0不缩小

　　flex-basis：auto 属性界说了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器按照这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原来巨细。这个属性根基不用去动，设置成固定巨细时和 width、height效果一样

　　align-self 允许元素有本身的对齐方法，会笼罩失align-items

　　　　center

　　　　flex-start

　　　　flex-end

　　　　auto

　　　　baseline

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

css3 flexBox 弹性构造 记录