CSS之flexbox

一切能用css解决的问题都不要用js；
一直以来对css的关注就比较少，一篇写得很经典的flexbox的文章：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

总结：
在flexbox出现以前，我们的布局只能采用position+display+float属性来进行布局，下图列举了一些常见的布局：

前段时间总结了如何进行2列布局的方法：
css的两列布局
但是没有写如何利用flexbox进行两列布局

关于flexbox

flexbox的使用其实很简单，外面一个盒子，里面放一些小盒子。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

父容器

.box{  display: flex;}

父容器的属性：
- flex-direction:决定主轴的方向
- flex-wrap:决定换行方式
- flex-flow:direction和wrap的合称
- justify-content:主轴对齐方式
- align-items:交叉轴对齐方式
- align_content:多根轴线的对齐方式

1.flex-direction:决定主轴的方向

属性值：row|row-reverse|column|column-reverse
row

row-reverse

column

column-reverse就是逆转了

2.wrap:决定换行的方式

属性值：nowrap（默认）|wrap||wrap-reverse， 即不换行（默认）｜换行｜逆向换行；
第一种情况是默认的情况：5个盒子，即使你设置的宽度，如果宽度总和大于container，那么他们的宽度就会被压缩了

wrap-reverse:

这种情况就是颠倒过来的排列了

3.flex-flow:direction和wrap的合称

就不解释了，就是两个属性的合并
flex-flow:row nowrap (默认)

4. justify-content:主轴对齐方式

我觉得这个属性很有用，当前前提是在外部盒子有空余空间的时候，怎么利用剩余空间，如果里面的盒子把外部盒子都占满了，怎么布置都没有用啊；

flex-start:

flex-end:

center:

space-between

space-around

这样也是有效的哦——
设置了wrap 和justify-content:center

5.align-items属性

前面那个是横轴的对齐方式，这个就是设置纵轴的对齐方式了，不过我觉得flexbox这里取名方式就有点奇怪啊，啊，先不管，先看看它的属性值吧。

跟justify-content有点像吧
align-items: flex-start | flex-end | center | baseline | stretch;

项目属性

有 order｜flex-grow｜flex-shrink｜flex-basis｜flex｜align-self

order属性

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

flex-grow

定义了元素是否放大，属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

flex-shrink

定义了元素是否收缩，属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis｜

basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self属性

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

.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex 实现圣杯布局

flex实现圣杯布局主要依赖于flex的三个属性：
flex-grow，flex-shrink, flex-basis

• 需要固定宽度的盒子设置flex-grow 为0；flex-shrink 为0；即不收缩不扩展，basis设置为需要的大小；

• 不需要固定的盒子设置flex为1 ：即有剩余空间就放大

  代码

    <div class="container1">        <div class="box1">1</div>        <div class="box2">2</div>        <div class="box3">3</div>    </div>       .container1 {            display: flex;            display: -webkit-flex;            flex-flow: row;            align-items: baseline;            height: 100px;            width: 200px;            border: 1px solid blue;        }        .box1 {            flex: 0 0 50px;////设置flex布局，不伸缩            height: 50px;            padding: 10px;            box-sizing: border-box;            border: 1px solid #333;        }        .box2 {            flex: 0 0 50px; //设置flex布局，不伸缩            height: 50px;            padding: 10px;            order: 1;            box-sizing: border-box;            border: 1px solid #333;        }        .box3 {            width: 50px;            height: 50px;            padding: 10px;            flex: 1;//可伸缩            box-sizing: border-box;            border: 1px solid #333;        }

---

这里解释一下box-sizing这个属性：
因为ie和chrome的盒模型不一样
webkit的宽度是 width=width(css定义的)+padding+border;
ie的宽度 width（定义的）

这里设置border-box，即按照ie的盒模型解释：

css设置的宽需要减去padding/2+border/2

---

如果不设置按照webkit的解释：

就是css设置的宽就是元素的宽，padding和border是不算在里面的；