神奇的FlexBox弹性布局

1、Flex Box弹性布局是什么？

何为弹性：就是能随着宽高变化实现排版自适应变化，且兼容性跨浏览器。

Flex是Flexible Box缩写，翻译为“弹性布局”，用来为盒装模型提供最大的灵活性。

弹性布局可以让我轻松实现如：左中右对齐，上中下对齐，均匀分布，浏览器自适应等功能。

弹性布局可以通过样式display:flex轻松实现

1.1、Flex-box感受案例

【弹性布局感受1】

效果：flex-box布局可以实现两个空间紧密相连。

.div2{

            display: flex;

            display: -mox-flex;

}

<div class="div3">

            <input type="email" class="myinput1" name="email" />

            <button type="submit">发送</button>

</div>

【弹性布局感受2】

效果：flex-box可以使一个空间沾满一整行。

.div3{

            display: flex;

            display: -mox-flex;

}

.myinput1{

            flex-grow: 1;

}

<div class="div3">

            <input type="email" class="myinput1" name="email" />

            <button type="s