flex布局常见思路

落日映苍穹つ 2022-09-02 08:33 173阅读 0赞

# 上下结构 #

## 思路 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJvbm1vbW8_size_16_color_FFFFFF_t_70]

## 效果 (蓝色部分): ##

![在这里插入图片描述][e2563bd7608a428a864ffae2ee4eebeb.png]

## 代码: ##

html:

css:

.search-index .login { 
      display: flex;
      flex-direction: column;  /* 把主轴设置成y轴 */
      align-items: center;  /* 侧轴上的元素居中对齐(注意只有一个元素) */
      justify-content: center; /* 主轴上的元素居中对齐 (调整位置) */
      width: 51px;
      height: 44px;
      padding-right: 4px;
      background-color: skyblue;
    }
    .search-index .login::after { 
      content: "";
      display: block;
      width: 22px;
      height: 22px;
      background: url(../images/sprite.png) no-repeat 0 -36px;
      background-size: 21px auto;
      order: -1;
    }
    .search-index .login span { 
      font-size: 12px;
      line-height: 12px;
      color: #fff;
    }

# 单行排列 #

![在这里插入图片描述][01891993b23c44df8dde625a68115934.png]  
可以将每个图标及其对应的文字作为一个`li`, 那么一行就有五个`li`. 然后为每个`li` 设置`flex:1;` , 这样五个元素就能在同一行并且占有相等的份数了.

<ul class="local-nav">
 <li>
 <a href="#">
 
 攻略·景点
 </a>
 </li>
 <li>
 <a href="#">
 
 门票·玩乐
 </a>
 </li>
 <li>
 <a href="#">
 
 美食林
 </a>
 </li>
 <li>
 <a href="#">
 
 周边游
 </a>
 </li>
 <li>
 <a href="#">
 
 一日游
 </a>
 </li>
 </ul>

/* local-nav部分 */
    .local-nav { 
      display: flex;
      position: relative;
      height: 64px;
      padding: 4px 0 8px;
      margin: -12px 12px 10px;
      border-radius: 8px;
      background-color: #fff;
    }
    .local-nav li { 
      flex: 1;
    }
    .local-nav li a { 
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .local-nav li a i { 
      width: 40px;
      height: 40px;
      background: url(../images/localnav_bg.png) no-repeat 0 0;
      background-size: 40px auto;
    }
    .local-nav li:nth-child(2) a i{ 
      background: url(../images/localnav_bg.png) no-repeat 0 -40px;
      background-size: 40px auto;
    }
    .local-nav li:nth-child(3) a i{ 
      background: url(../images/localnav_bg.png) no-repeat 0 -80px;
      background-size: 40px auto;
    }
    .local-nav li:nth-child(4) a i{ 
      background: url(../images/localnav_bg.png) no-repeat 0 -120px;
      background-size: 40px auto;
    }
    .local-nav li:nth-child(5) a i{ 
      background: url(../images/localnav_bg.png) no-repeat 0 -160px;
      background-size: 40px auto;
    }

# 多行排列 #

![在这里插入图片描述][c540ebc9826f409fa6729ac7072061b3.png]  
多行元素就不适用 `flex:1;` 这种方式了. 需要给每个 `li` 设置宽度 (这里设置的是 `width: 20%;` , 并且要用 `flex-wrap: wrap;` 换行.

<ul class="subnav-entry">
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 <li><a href="#">自由行</a></li>
 </ul>

/* subnav-entry部分 */
    .subnav-entry { 
      display: flex;
      margin: 0 12px 12px;
      flex-wrap: wrap;
    }
    .subnav-entry li { 
      width: 20%;
    }
    .subnav-entry li a { 
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      line-height: 12px;
    }
    .subnav-entry li a i { 
      width: 28px;
      height: 28px;
      margin: 10px 0 5px;
      background: url(../images/subnav-bg.png) no-repeat 6px -137px;
      background-size: 24px auto;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJvbm1vbW8_size_16_color_FFFFFF_t_70]: /images/20220829/ab35e9c9cfcc4efbb9cfe5fe7c4b5e0d.png
[e2563bd7608a428a864ffae2ee4eebeb.png]: /images/20220829/464c5be1352c4769a685d0db4d4a8aec.png
[01891993b23c44df8dde625a68115934.png]: /images/20220829/6a2b6cc11f5f4b918024c8e004e5753b.png
[c540ebc9826f409fa6729ac7072061b3.png]: /images/20220829/ab8eb311a2ee463faa646346885f9b31.png