最常用的display伸缩布局

最新推荐文章于 2024-07-16 04:30:49 发布

置顶 Anliny

最新推荐文章于 2024-07-16 04:30:49 发布

阅读量312

点赞数

分类专栏：前端案例文章标签：布局 CSS3

本文链接：https://blog.csdn.net/Aliny_one/article/details/51735302

版权

前端案例专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在我们以前的伸缩布局中，假设我们需要在一个<div>中进行三列相等大小的布局，我们通常的做法是给外层div 里面的div 设置宽度。即：

这样是能够做到平均三等分，如果我们想让外层DIV 分为四等分，我们是不是要去改其中一个div的宽度。在我们CSS3中，就解决了这一点

以代码为例：

.display-box{display: flex;}
.display-box div{height:50px;margin-top: 10px;}
.flex-1{flex: 1;}
.flex-2{flex: 2;}
.flex-3{flex: 3;}

<div class="display-box">
<div class="flex-1" style="background-color: firebrick;">不计算宽度，直接平分三份，flex：1</div>
<div class="flex-1" style="background-color: aquamarine;">不计算宽度，直接平分三份，flex：1</div>
<div class="flex-1" style="background-color: blueviolet;">不计算宽度，直接平分三份，flex：1</div>
</div>

<div class="display-box">
<div class="flex-1" style="background-color: firebrick;">不计算宽度，直接平分六份，占一份，flex：1</div>
<div class="flex-2" style="background-color: aquamarine;">不计算宽度，直接平分六份，占两份 flex：2</div>
<div class="flex-3" style="background-color: blueviolet;">不计算宽度，直接平分六份，占三份 flex：3</div>
</div>