css总结（1）flex布局

一、浏览器兼容性：
设置为 Flex 布局后，子元素的 float、clear、vertical-align 属性都将失效
写法：
display: box; /* 2009 version 老语法 /
display: flexbox; / 2011 version 过渡语法 /
display: flex | inline-flex; / 2012 version 新语法 /
新语法目前的支持情况：
Chrome 29+
Firefox 28+
Safari 9+
iOS Safari 9+
Android 4.4+
IE Mobile 11+
兼容性写法：.
.wrap {
display: -webkit-box; / 老语法 iOS 6-, Safari 3.1-6 /
display: -moz-box; / 老语法 Firefox 19- (buggy but mostly works) /
display: -ms-flexbox; / 过渡语法 IE 10 /
display: -webkit-flex; / 新语法 Chrome /
display: flex; / 新语法, Spec - Opera 12.1, Firefox 20+ */
}
二、用的做多的：不确定高度需要水平垂直居中
.item{
display: flex;
justify-content: center;
align-items: center;
}
三、属性介绍
1、作用于父元素（容器）的
首先，定义一个父容器：

.container { display: flex | inline-flex; } 有六个属性可以设置的容器上：

flex-direction：定义了主轴的方向，即项目的排列方向

row（默认值）：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；
row-reverse：主轴在水平方向，起点在右侧；
column：主轴在垂直方向，起点在上沿；
column-reverse: 主轴在垂直方向，起点在下沿。
图：




flex-wrap：默认情况下，项目是排成一行显示的，flex-wrap 用来定义当一行放不下时，项目如何换行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
图：



flex-flow：flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。

justify-content：定义了项目在主轴上的对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
图：

align-items：定义了项目在交叉轴上如何对齐
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
图：





align-content：align-content 定义了多根轴线的对齐方式，若此时主轴在水平方向，交叉轴在垂直方向，align-content 就可以理解为多行在垂直方向的对齐方式。项目排列只有一行时，该属性不起作用。
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}






2、作用于子元素（项目）的
对项目设置属性，可以更灵活地控制 Flex 布局。以下六种属性可以设置在项目上：

order：order 定义了项目的排列顺序，默认值为 0，数值越小，排列越靠前。

flex-grow：
ex-grow 定义了项目的放大比例，默认为 0，也就是即使存在剩余空间，也不会放大。
如果所有项目的 flex-grow 都为 1，则所有项目平分剩余空间；如果其中某个项目的 flex-grow 为 2，其余项目的 flex-grow 为 1，则前者占据的剩余空间比其他项目多一倍。

flex-shrink：
flex-shrink 定义了项目的缩小比例，默认为 1，即当空间不足时，项目会自动缩小。
如果所有项目的 flex-shrink 都为 1，当空间不足时，所有项目都将等比缩小；如果其中一个项目的 flex-shrink 为 0，其余都为 1，当空间不足时，flex-shrink 为 0 的不缩小。

flex-basis：
flex-basis 定义了在分配多余的空间之前，项目占据的主轴空间，默认值为 auto，即项目原来的大小。浏览器会根据这个属性来计算主轴是否有多余的空间。
flex-basis 的设置跟 width 或 height 一样，可以是像素，也可以是百分比。设置了 flex-basis 之后，它的优先级比 width 或 height 高。

flex：
flex 属性是 flex-grow、flex-shrink、flex-basis 的缩写，默认值是 0 1 auto，后两个属性可选。
该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。auto 代表在需要的时候可以拉伸也可以收缩，none 表示既不能拉伸也不能收缩。

.item {
flex: auto | none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
}
align-self：
align-self 用来定义单个项目与其他项目不一样的对齐方式，可以覆盖 align-items 属性。默认属性值是 auto，即继承父元素的 align-items 属性值。当没有父元素时，它的表现等同于 stretch。
align-self 的六个可能属性值，除了 auto 之外，其他的表现和 align-items 一样。