您的位置：首页 > Web前端 > CSS

DIV+CSS弹性盒子布局

2017-09-18 15:39 288 查看

使用弹性盒子布局网页，可以省去浮动，因此也避免了由于浮动带来的负面影响。

下面直接上代码

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.big-box{
width: 1000px;height: 500px;background: #ccc;
/*关键代码来了 */
display: flex;/*变成弹性盒子*/
flex-flow: wrap;/*内容换行*/
justify-content: space-around;/*内容对齐方式*/
}
.box{width: 300px;height: 200px;background: #4C4D4E;}
</style>
</head>
<body>
<div class="big-box">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>

</html>

网页效果

在不适用弹性盒子的情况下，想要实现大盒子内的小盒子浮动排布，需要给每个小盒子加浮动和外边距。

而在大盒子是弹性盒子的前提下（display: flex;/*变成弹性盒子*/），只需要告诉大盒子我想要内部是什么样的排列方式即可（flex-flow: wrap;/*内容换行*/justify-content: space-around;/*内容对齐方式*/）。

当然以上只是一种排列方式，还要其他排列方式，百度flex即可。

弹性盒子内是可以嵌套弹性盒子的，通过此方法可以实现更复杂的网页布局。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航