CSS Flex彈性布局實現Div

前言

前端樣式開發時經常會遇到：當子 DIV 長度大於 父 DIV 中需要實現換行時，我們采取flex布局解決此問題。

代碼如下：

<!-- 將所有 app 裝在 application 內 --> <div class="application"> <div class="app"> <div class="icon"></div> <div class="name">打開應用</div> </div> <div class="app"> <div class="icon"></div> <div class="name">打開應用</div> </div> <div class="app"> <div class="icon"></div> <div class="name">打開應用</div> </div> <div class="app"> <div class="icon"></div> <div class="name">打開應用</div> </div> <div class="app"> <div class="icon"></div> <div class="name">打開應用</div> </div> </div> </div> 

樣式代碼如下

.application { width: 1100px; height: 500px; display: flex; /* flex-flow是lex-direction和 flex-wrap的簡寫形式，如：row wrap|column wrap-reverse等。默認值為row nowrap，即橫向排列 不換行 */ /* ！！！！！ 該步驟實現 子 div 換行 ！！！！！*/ flex-flow: row wrap; /* !當主軸沿水平方向時!justify-content,決定item在主軸上的對齊方式，可能的值有flex-start（默認），flex-end，center，space-between，space-around */ justify-content:center; } .application .app { margin-left: 170px; width: 160px; height: 170px; position: relative; } .application .app .icon { width: 125px; height: 125px; /* icon在 app 中水平居中 */ margin: 0 auto; background: url("../../../assets/zdws/application.png"); background-size: 100% 100%; } .application .app .name { width: 100%; height: 50px; line-height: 50px; text-align: center; font-size: 20px; font-family: Source Han Sans CN; font-weight: 500; color: rgba(255, 255, 255, 1); }