css中div超出自动换行

目录

页面样式

html页面代码

scss样式代码

页面样式

这是布局完成之后的整个页面的布局，可以看到每行显示两个div

html页面代码

<div className='home'><div className='top'><h1>购物商城</h1></div><div className='center'><div>1</div><div>2</div><div>3</div><div>4</div><div>4</div><div>4</div><div>4</div><div>4</div></div></div>

在center大盒子中有8个div盒子，我们需要让他均匀的分布在页面

scss样式代码

.home{width: 100vw;height: 100vh;background-color: lightblue;.top{width: 100vw;height:60px;background-color: lightgray;h1{text-align: center;line-height: 60px;}}.center{width: 100vw;height: calc(100vh - 60px);background-color: lightcoral;display: flex; //把盒子在一行显示overflow-x: hidden; //超出隐藏flex-wrap: wrap; //超出自动换行div{width: 48%;height: 200px;background-color: lightseagreen;margin: 10px 5px 10px 5px;}}}

我们先是通过display：flex把所有的div整到一行中，overflow：hidden超出部分隐藏，flex-wrap:wrap超出自动换行

margin属性四个值的先后顺序是：margin-top，margin-right，margin-buttom，margin-left