弹性盒

快速上手弹性盒

弹性盒的优点

当我们将两个div放在同一行的时候,一般传统的方式是,在外面嵌套一个div,在将两个div分别设置好宽高,在写入浮动效果,但是这样真的好用吗,如果需求中再加入需要设置左右边距呢。而且你会发现我们需要提供三个CSS样式,分别给父div和两个子div。而弹性盒只需要一个CSS样式就能完成,当然弹性盒的魅力不仅仅是在这一方面。
CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。具体的内容大家可以自行百度。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性的使用

在CSS文件中加入

.fle{
display: flex;
justify-content: space-between;
}

HTML文件中

<div class="fle">我是父div
<div>我是子div</div>
<div我是子div</div>
</div>

这个时候页面的效果是,两个div内容分别是左右对齐的,如果我们想要右边的div和右侧网页边距有距离,我们可以在。fle选择器中加入margin属性

.fle{
display: flex;
justify-content: space-between;
margin-right: 20px;
}
这个时候效果就是左边的div内容左对齐,右边的div靠右并且距离右侧20像素

如果有问题欢迎大家留言讨论

©️2020 CSDN 皮肤主题: 1024 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值