弹性盒子flex布局（一）

什么是弹性盒子？

弹性盒子是CSS3的一种新型的布局模型。即（flex box）,
他给flexbox的子元素之间提供了强大的空间分布和对齐能力。

使用flex布局需要注意的事项

使用了flex布局后，float，clear，vertical-align属性在伸缩项目上没有效果。

flexbox的两根轴线

1. 主轴和交叉轴
2. 方向
3. 起始位置和终止位置。

---

flexbox的使用

当没有使用弹性布局的时候，你看到的以下代码创建的网页是这样的。

    .wrapper{
        width: 600px;
        height: 300px;
        border: 1px solid black;
    }
    .item:first-child{
        width: 100px;
        background: #2395ff99;
    }
    .item:nth-child(2){
        width: 100px;
        background: rgba(35,64,241,0.3);
    }
    .item:last-child{
        width: 100px;
        background: rgba(135,63,253,0.5);
    }

下面是网页的基本布局

但是当你在wrapper中加入了display: flex;属性时，他就会发生一个小变化（见下图）

这是不是像用了左浮动而达到的效果？当然这和左浮动又不一样，上图中用了flex布局后，我并未给item设定具体的高，但由图片可知，子集的高度自动填充满了父级的高度。

当把每个item的宽设置为200px，照例来说第三个div会往下排列，因为由inline-block可知每个换行都会有默认的间隙，导致三个div的宽加上默认的间隙大于600px，所以第三个div站不下。但是第三个div在上图看来在flex布局下站稳了脚跟，这又是为什么呢？

    这就是flex布局的默认魅力：
    所有CSS属性都会有一个初始值，所以flex容器中的所有 flex 元素都会初始默认效果：
    1、主轴水平从左向右。元素排成一列(felx-direction属性的初始值是row)
    2、元素从主轴起始线开始(justyfy-content: flex-start)
    3、flex布局默认元素不拉伸(flex-grow: 0;)
    4、默认会压缩(flex-shrink: 1),默认不换行(flew-wrap:nowrap)
    5、不设置高度时flex元素充满flex容器(align-items: stretch),元素被拉伸来填充交叉轴大小

---

以上就是弹性盒子flex布局的一些初始默认的属性，初识flex布局，发现其功能十分强大。

---

大佬勿喷，初次写前端博客和第一次用markdown写博客，感觉十分生疏，希望下次布局能更进步一些。