Flex弹性布局

一、基本概念

注意：Flex布局中，float、cleat、vertical-align 属性将失效。

二、容器的属性

//主轴的方向；水平向右，水平向左，垂直向下，垂直向上
flex-direction：row | row-reverse | column | column-reverse

//换行；不换行，第一行在上方，第一行在下方
flex-wrap：nowrap | wrap | wrap-reverse;

//flex-direction属性和flex-wrap属性的简写形式
flex-flow：flex-direction flex-wrap

//对齐方式；左对齐，右对齐，居中，两端对齐，每个项目两侧的间隔相等
justify-content：flex-start | flex-end | center | space-between | space-around;

//交叉轴上的对齐方式；起点对齐，终点对齐，中点对齐，第一行文字的基线对齐，项目未设置高度或设为auto将占满整个容器的高度
align-items：flex-start | flex-end | center | baseline | stretch;

//多根轴线的对齐方式；起点对齐，终点对齐，中点对齐，轴线之间的间隔平均分布，每根轴线两侧的间隔都相等，轴线占满整个交叉轴
align-content：flex-start | flex-end | center | space-between | space-around | stretch;

三、项目的属性

用在flex项目上的属性总共有6个，order || flex-basis || flex-grow || flex-shrink || flex || align-self

例如：

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
</ul>

ul {
    display: flex;  
    width: 600px;
    border: 1px solid red;
}
li { 
    width: 100px;
    height: 100px;
    margin: 8px;
    padding: 4px;
    text-align: center;
    line-height: 100px;
    background-color: #8cacea;
}

(1)、order，顾名思议，顺序的意思，就是在不改变html 结构的情况下，给每一个flex项目重新排序，比如让第一个项目在最后面，它的取值是一个数字，正数，负数，0 都可以，如8。 浏览器在进行重绘时会根据这个数字对flex项目进行重新排列，规则就是从小到大，哪个项目的order 属性大，哪个项目排在后面，反之则在前面，如果有两个flex项目的order值相等，就按照它们在html中定义的结构进行排列。当然，每一个flex项目的order默认取值是0, 表示flex项目会按照html 中定义的结构进行排列。 　　 我们给每一个li 添加一个order 属性，根据规则，第三个项目排在第一位，第二个项目不变，第一个项目排在最后。

li:nth-child(1) {
    order: 3;
}
li:nth-child(2) {
    order: 2;
}
li:nth-child(3) {
    order: 1;
}

(2)、flex-basis 的取值： auto || <length>, length 就是我们平常用的一些属性值，如px, rem.
flex-basic 的默认取值是auto, 如果主轴方向是水平方向(row)，它等于flex项目的宽度(width)。如果主轴方向是垂直方向(conlumn), 它等于flex项目的高度(height)。
flex-basis 取值为length, 表示我们可以赋值给它，如150px, 那么它就会覆盖掉flex项目原有的宽度或高度(取决于主轴的方向)。

li:nth-child(1) {
   flex-basis: 100px;
   background: yellow;
}
li:nth-child(2) {
    background: red;
    flex-basis: 200px;
}
li:nth-child(3) {
    flex-basis: auto;
}

(3)、flex-grow默认值为1；平均占满了整个flex container的空间（备注：当设置每一个项目的flex-grow 为1时，一共有3 个元素，整个flex-container会被分成3份，每一个flex-item 各占一份，所以都相同。如果我们其中一个flex-flow设为2. 还是3个元素，那么整个flex container 就分成1+2+1 = 4份，其余2个各1/4, 而第二个占2/4,所以第二个就相对变大了， flex-grow 设置的某个或某些项目相对于其他项目的比例。）

li:nth-child(1) {
    flex-grow: 1;
}
li:nth-child(2) {
    flex-grow: 1;
}
li:nth-child(3) {
    flex-grow: 1;
}

(4)、flex-shrink : shrink 收缩，当所有flex项目的宽度总和超过 flex-contaier容器的时候，每一个项目都会进行收缩。它的默认值是1, 表示每一个项目都会等比例收缩。　 如果把某个元素的flex-shrink 设为0, 它就不会进行收缩。 如果把某个flex项目的flex-shrink设置3，和flex-grow 一样，它也是比例，每一个flex item收缩1, 它收缩3， 它比别的项目收缩更严重。

li:nth-child(1) {
    flex-shrink: 0;
}
li:nth-child(2) {
    flex-shrink: 3;
}

flex： 是上面三个属性简写，像边框border属性一样, flex: flex-grow flex-shrink flex-basis,  根据上面的内容，我们很轻松地就可以得出它的默认值为0 1 auto，这和我们平时没有设置这个属性表现一致，flex-basis: auto 表示，它和元素的宽度或高度保持一致，flex-grow等于0，表示如果flex容器有剩余空间，它并不会扩大，flex-shrink为1，如果flex容器空间不足，它会进行收缩。注意这三个属性的排列顺序

(5)、flex 简写形式还有几个关键字： none， auto. flex: none 相当于flex: 0 0 auto, 它表示flex项目跟元素的宽度或高度保持一致，即不收缩也不扩张。flex:auto相当于flex: 1 1 auto;

(6)、align-self： 它决定单个flex项目在侧轴上怎么排列。 align-self 就是在这整体排列的基础上，对单个项目的排列，它的取值为 auto || flex-start || flex-end || center || baseline || stretch; 它的默认取值auto, 就是表示它跟align-item属性保持一致； 如果对这个属性进行设置，它就会覆盖掉align-item属性。

li:nth-child(1){
    align-self: flex-start;
}

四、垂直居中实现

display:flex;
justify-content:center;
align-items:center;

例如：

<div class="vertical-container">
   <div class="small">
   </div>
</div>

.vertical-container{
        height:300px;
        -webkit-display:flex;
        display:flex;
        -webkit-align-items:center;
        align-items:center;
        -webkit-justify-content:center;
        justify-content:center;
        border:1px solid #ccc;
    }
    .small{
        width:100px;
        height:100px;
        background-color:green;
    }