css之Flex布局(二)

flex布局(二)之flex-item的属性

前言：这里的flex-item的属性是指Flex容器中项目div的属性

继上篇讲了flex布局的容器的六大css属性，这次来说说容器中的项目（flex-item）的六大css属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

在下面的代码实例中，为了更直观的看属性的解析。不会在代码中给每个div设置宽高度。但是这个步骤在实际代码中是必须的！ 假设每个flex-item的宽高都为200px

---

order属性

根据对每个flex-item规定的order值的大小进行比较，各个flex-item将从小到大进行重新排列。对于没有设置order属性的flex-item，默认order为0

...
<style>
    .contain{
        display:flex;
        flex-direction:row;
    }
    .flex-item1{
        order:2;
    }
    .flex-item2{
        order:1;
    }
    .flex-item3{
        order:3;
    }
</style>
<div class="contain">
    <div class="flex-item1">1</div>
    <div class="flex-item2">2</div>
    <div class="flex-item3">3</div>
</div>

---

flex-grow属性

其作用是将项目成比例放大。对于没有设置该属性的flex-item来说，其flex-grow默认为0

...
<style>
    .contain{
        display:flex;
        flex-direction:row;
        width:800px;
    }
    .flex-item1{
        flex-grow:2;
    }
    .flex-item2{
        flex-grow:1;
    }
    .flex-item3{
        flex-grow:1;
    }
</style>
<div class="contain">
    <div class="flex-item1">1</div>
    <div class="flex-item2">2</div>
    <div class="flex-item3">3</div>
</div>

大家要注意，这里的成比例放大，是根据原来剩余的空间多少，进行2:1:1的成比例分配给这三个flex-item。

重点来了（解析）

在没有设置这个属性前，剩余的宽度是容器宽度减去三个flex-item的总宽度(假设每个flex-item的宽度为200px),那么还剩下200px的。

800px-200px*3 = 200px

然后设置flex-grow属性后，浏览器就会根据2:1:1的比例将这剩余的空间划分给三个flex-item。

flex-item1分到100px；flex-item2分到50px；flex-item3分到50px

最后flex-item1的宽度为300px，flex-item2的宽度为250px，flex-item3的宽度为250px

---

flex-shrink属性

其作用是flex-grow属性的反作用，也就是成比例的缩小。这里的“成比例缩小”和flex-grow的“成比例放大”的原理是一样的。

...
<style>
    .contain{
        display:flex;
        flex-direction:row;
        width:800px;
    }
    .flex-item1{
        flex-shrink:2;
    }
    .flex-item2{
        flex-shrink:1;
    }
    .flex-item3{
        flex-shrink:1;
    }
</style>
<div class="contain">
    <div class="flex-item1">1</div>
    <div class="flex-item2">2</div>
    <div class="flex-item3">3</div>
</div>

解析

假设当我们的容器缩小到500px时，那么我们将失去了300px的宽度。但是要注意，这里有个临界点，容器宽度大于600px将会放大，小于600px将会缩小。这600px就是三个flex-item的宽度和
所以实际上我们是缩小了100px

600px - 500px = 100px

那么根据2:1:1的比例分配

flex-item1缩小50px；flex-item2缩小25px；flex-item3缩小25px

所以最后flex-item1的宽度为150px；flex-item2宽度为175px；flex-item3的宽度为175px。

---

flex-basis属性

让浏览器知道一个flex-item长度多少。设置完这个值后，不管浏览器放大还是缩小都是根据这个值来进行相加减。不会再根据它的width进行计算。他的默认值是auto，也就是flex-item原来的大小

flex属性

flex是flex-grow，flex-shrink，flex-basis的三合一。它的默认值是0 1 auto。后两个属性可选。
另外，该属性有两个快捷值。分别为：auto(1 1 auto)和none(0 0 auto)

...
<style>
    .contain{
        display:flex;
        flex-direction:row;
        width:800px;
    }
    .flex-item1{
        flex:1(flex-grow) 1(flex-shrink) auto(flex-basis);
    }
    .flex-item2{
        flex:1 1 auto;
    }
    .flex-item3{
        flex:1 1 auto;
    }
</style>
<div class="contain">
    <div class="flex-item1">1</div>
    <div class="flex-item2">2</div>
    <div class="flex-item3">3</div>
</div>    

---

align-self属性

该属性允许单个flex-item有与其他有不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

 ...
<style>
    .contain{
        display:flex;
        flex-direction:row;
        align-items:flex-start;
        width:800px;
    }
    .flex-item2{
        align-self:flex-end;
    }
</style>
<div class="contain">
    <div class="flex-item1">1</div>
    <div class="flex-item2">2</div>
    <div class="flex-item3">3</div>
</div>       

总结

这六个属性中，需要注意的是放大和缩小属性。当我们要使用它们的时候，一定要注意临界值！一般情况下，临界值就是他的宽width。当然，如果设置了padding、flex-basis等属性就另算了。