CSS Flex弹性布局实现Div

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