03-flex-wrap是否换行

 flex-wrap:运用到父元素上 结合 display: flex;
flex-wrap: wrap; 换行
flex-wrap: nowrap; 不换行


    
#main {
    width: 300px;
    height: 300px;
    border: 1px solid #c3c3c3;
    display: flex; 
    flex-wrap: nowrap; 默认不换行
}

#main div {
  width: 100px;
}
</style>

<div id="main">
  <div style="background-color:coral;">11</div>
  <div style="background-color:lightblue;">22</div>
  <div style="background-color:pink;">33</div>
  <div style="background-color:olive;">4</div>
</div>

猜你喜欢

转载自www.cnblogs.com/IwishIcould/p/11802660.html