css3 flexBox 弹性布局 记录

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

首先让我们明白在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

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

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

　　　　flex-start

　　　　flex-end

　　　　center

　　　　stretch 咝 jua 其

　　　　space-between

　　　　space-around

　　元素

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

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

　　flex-shrink：1 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，缩小的越多，如果为0不缩小(shi in k)

　　align-self 允许元素有自己的对齐方式，只会覆盖掉align-items不会覆盖掉align-content,

　　　　center

　　　　flex-start

　　　　flex-end

　　　　auto

　　　　baseline

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