CSS3 flexbox 布局 ---- flex项目属性介绍

　　如今介绍用在flex项目上的css 属性，html结构仍是用ul, li 结构，不过内容改为1,2,3, 样式的话，直接把给 ul 设display:flex 变成flex 容器，默认主轴的方向为水平方向。index.html 

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

　　index.css

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;
}

　　页面展现内容以下：

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

　　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;
}

　　页面的展现效果和咱们预料的一致

　　flex-basis,  在flex-shinrk 和flex-grow 属性起做用之前，它控制每个flex项目的默认大小，flex-shrink 和 flex-grow 咱们下面会说到。flex-basis 的取值： auto || <length>,  length 就是咱们日常用的一些属性值，如px, rem. 

　　flex-basic 的默认取值是auto, 那auto 表明什么意思呢? 若是主轴方向是水平方向(row)，它等于flex项目的宽度(width)。若是主轴方向是垂直方向(conlumn), 它等于flex项目的高度(height)。

　　flex-basis 取值为length, 表示咱们能够赋值给它，如150px,  那么它就会覆盖掉flex项目原有的宽度或高度(取决于主轴的方向)。

　　咱们如今有三个flex项目，且每个flex项目的宽度是100px, 如今把第一个flex项目的flex-basic设为100px, 第二个flex 项目的flex-basis 设了200px,第三个flex项目flex-basis: auto 做为参考，

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;
}

　　按照理论，第三个项目和之前没有什么变化，且因为第一个项目的flex-basis 等于100px, 它们两个应该同样大，第二个项目flex-basis的200px, 覆盖掉width:100px, 它比其余两个都大。

　　flex-grow: 它指的是当flex项目没有占满整个flex-contain 的空间时，每个项目怎么变化，要不要变大去占据空间，grow 就是生长，长大的意思，它的默认值是0，不会进行变化，就像上图展现的同样。 这时咱们把每个flex项目的flex-grow值设为1,

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

　　能够看到它占满了整个flex container的空间，flex-grow 的值覆盖了width的值。 那么这个属性值1 表明什么呢? 咱们把全部的值都设为999， 它的形为和刚才设为1 没有什么区别。

　　如今咱们把其中一个flex项目，好比第二个，的flex-grow 改成2

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

　　能够发现这个元素变大了，再改3, 它更大了

　　从这里能够看出它不是一个绝对值，而是相对值，是某个flex项目相对其它flex项目的比例。当设置每个项目的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 设置的某个或某些项目相对于其余项目的比例。

　　flex-shrink : shrink 收缩，当全部flex项目的宽度总和超过 flex-contaier容器的时候，每个项目都会进行收缩。它的默认值是1, 表示每个项目都会等比例收缩。如今把元素增长为6个

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

　　能够看到每个项目都收缩了，但仍是同样大，这就是默认值flex-shrink :1 起做用。

　　若是把某个元素的flex-shrink 设为0, 它就不会进行收缩。如今把第一个项目的flex-shrink改成0，

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

　　它确实没有收缩

　　若是把某个flex项目的flex-shrink设置3，和flex-grow 同样，它也是比例，每个flex item收缩1, 它收缩3， 它比别的项目收缩更严重。把第二个flex-shrink设置为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容器空间不足，它会进行收缩。注意这三个属性的排列顺序

　　如今咱们把元素减小为2 个，

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

　　而后调整一下样式，第一个flex项目flex: 2 1 300px; 第二个flex项目 flex: 1 2 300px; flex容器ul 的宽度为632px, 正好放下这个项目。

ul {
    display: flex;  
    width: 632px;
    border: 1px solid red;
}
li { 
    height: 100px;
    margin: 8px;
    text-align: center;
    line-height: 100px;
}
li:nth-child(1) {
    flex: 2 1 300px;
    background: yellow;
}
li:nth-child(2) {
    flex: 1 2 300px;
    background: red;
}

　　整个效果以下，很是简单

　　如今咱们看一下flex-shrink是怎么工做的？当咱们把容器宽度改成422px;

ul {
    display: flex;  
    width: 422px;
    border: 1px solid red;
}

　　整个容器损失了210px(632px -422px )的空间，因为第一个元素的flex-shrink 是1， 第二个shrink是2, 因此这损失的210px，分红了3份，第一个项目占1份，也就是70px, 因此第一个项目损失了70px,宽度变为了300-70 =230px; 第二个项目占两份，也就是140px, 因此第二个项目损失了140px;宽度变为了300-140= 160px; 打开浏览器的控制台，能够看到变化的后的值。

　　flex-grow 的工做原理也是同样，当咱们把容器宽度增大到932px;时， 它多得到了300px的空间，每个项目都会增大，因为第一个是flex-flow是2, 第二个flex-flow是1, 因此这多出来的300px, 也是分红了3份，第一个项目占2份，200px, 宽度增大到300+200 =500px; 第二个占1份，100px, 宽度增大到300+100 =400px;

一样能够打开浏览器控制台查看项目大小

　上面咱们在设置flex属性值的时候， 三个属性都设置了，如flex: 2 1 300px; 可是若是咱们只设置一个值呢，如flex: 1，它会有怎么样的表现，其余省略的两个值到底取什么值。若是三个值中省略了flex-basis, 它的取值为0. 若是省略了flex-shrink 和flex-grow, 它们的取值将会是1.

　　由于flex是 flex-grow flex-shrink flex-basis 的缩写， 因此若是只写一个且是正数的话，如flex: 5, 这个数字指的是flew-grow的取值, 省略了flex-shrink和 flex-basis, 若是flex-shrink省略，它的取值是1，flex-basis 省略，它的取值是0. flex: 5 至关于 flex: 5 1 0; 若是写二个,也是数字的话，如 flex: 1 1; 它们分别是flex-grow flex-shrink 的取值，flex-basis的取值省略，它的取值仍是0； flex: 1 1 至关于 flex: 1 1 0;

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

　　align-self： 它决定单个flex项目在侧轴上怎么排列。你能够还记得 align-items，它也是决定flex项目在侧轴上的排列，不过它是对全部flex 项目进行的总体的排列, align-self 就是在这总体排列的基础上，对单个项目的排列，它的取值为 auto || flex-start || flex-end || center || baseline || stretch; 它的默认取值auto, 就是表示它跟align-item属性保持一致； 若是对这个属性进行设置，它就会覆盖掉align-item属性。

　　如今修改一下html, 改回三个flex项目

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

　　给ul设置高度，能够看出flex项目在侧轴上的变化。

ul {
    display: flex;  
    justify-content: space-around;
    width: 600px;
    height: 300px;
    border: 1px solid red;
}
li { 
    width: 100px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: #8cacea;
}

　　如今给第一个项目设置align-self 属性flex-start，看看效果

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

　　能够看到第一个flex项目在侧轴的顶部，和咱们见到的flex-start 一致。

　　flex-end, 第一个项目到了侧轴的底部，也和咱们预想的同样。

　　center: 侧轴中间

　　stretch 和baseline,也和align-items中的用法同样，这里就再也不演示了。