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