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); }