神奇的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="submit">