Flex布局实现图标一行三列，文字居下方显示

<h2>Flex布局实现图标一行三列，文字居下方显示</h2>
<p>想要将图标排列成一行三列，并将文字显示在图标下方，可以使用Flex布局和适当的CSS样式调整。以下是修改后的代码示例：html<template>  <view>    <!-- 顶部导航栏 -->    <view class='af-head'>      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>      <span class='af-head-msg af-head-fuc'>全部功能</span>    </view></p>
<pre><code>&lt;view class='func-show'&gt;      &lt;!-- 左侧导航栏 --&gt;      &lt;view class='sidebar'&gt;        &lt;view v-for='item in menuItems' :key='item.id' @click='selectMenuItem(item.id)'          :class='{ active: activeMenuItem === item.id }'&gt;          {{ item.name }}        &lt;/view&gt;      &lt;/view&gt;

  &lt;!-- 显示内容 --&gt;      &lt;view class='ssc'&gt;        &lt;view class='feature-row' v-for='row in featureRows' :key='row'&gt;          &lt;view class='feature-item' v-for='feature in row' :key='feature.id'&gt;            &lt;image :src='feature.icon' class='feature-icon' /&gt;            &lt;span class='feature-text'&gt;{{ feature.name }}&lt;/span&gt;          &lt;/view&gt;        &lt;/view&gt;      &lt;/view&gt;    &lt;/view&gt;  &lt;/view&gt;&lt;/template&gt;
</code></pre>
<script>export default {  data() {    return {      activeMenuItem: 1, // 当前选中的菜单项ID      menuItems: [        {          id: 1,          name: '菜单项1',          features: [            { id: 1, name: '功能1', icon: '/static/home/128/duanxin.png' },            { id: 2, name: '功能2', icon: '/static/home/128/duanxin.png' }          ]        },        {          id: 2,          name: '菜单项2',          features: [            { id: 3, name: '功能3', icon: '/static/home/128/duanxin.png' },            { id: 4, name: '功能4', icon: '/static/home/128/duanxin.png' }          ]        },        {          id: 3,          name: '菜单项3',          features: [            { id: 5, name: '功能5', icon: '/static/home/128/duanxin.png' },            { id: 6, name: '功能6', icon: '/static/home/128/duanxin.png' }          ]        }      ]    };  },  computed: {    featureRows() {      const rows = [];      const features = this.menuItems[this.activeMenuItem - 1].features;      const featureCount = features.length;      const rowCount = Math.ceil(featureCount / 3); // 计算行数，每行显示 3 个图标

      let rowIndex = 0;      for (let i = 0; i < featureCount; i += 3) {        rows[rowIndex] = features.slice(i, i + 3);        rowIndex++;      }

      return rows;    }  },  methods: {    selectMenuItem(itemID) {      this.activeMenuItem = itemID;    }  }};</script>
<style>.af-head {  position: relative;  background-color: #629ffc;  height: 100rpx;  display: flex;  justify-content: center;  font-size: 44rpx;  font-weight: 500;  font-family: sans-serif;}

.af-head-msg {  position: absolute;  bottom: 16rpx;  color: white;  left: 38rpx;}

.af-head-fuc {  text-align: center;  left: 300rpx;}

.func-show {  display: flex;  height: 1524rpx;}

.sidebar {  width: 100px;  height: 1524rpx;  padding-top: 20rpx;}

.sidebar view {  padding: 10rpx;  color: black;  list-style-type: none;  display: flex;  align-items: center;  margin-top: 14rpx;  cursor: pointer;  transition: background-color 0.3s;  height: 40px;}

.sidebar view.active {  border-left: 4px solid #629ffc;  background-color: white;}

.ssc {  flex: 1;  background-color: white;}

.feature-row {  display: flex;  justify-content: space-between; /* 图标水平间距平均分布 */  margin-bottom: 10px; /* 调整行与行之间的间距 */}

.feature-item {  display: flex;  flex-direction: column; /* 图标和文字垂直排列 */  align-items: center; /* 图标和文字居中对齐 */}

.feature-icon {  width: 40px;  height: 40px;}

.feature-text {  margin-top: 5px; /* 调整文字与图标之间的间距 */}</style>
<p>在上述代码中，我们使用 <code>featureRows</code> 计算属性将功能项按每行三个的方式进行分组，并使用Flex布局和CSS样式将图标排列成一行三列，并将文字显示在图标下方。</p>
<p><strong>代码解释：</strong></p>
<ul>
<li><strong>Flex布局：</strong> <code>feature-row</code> 类使用 <code>display: flex</code> 和 <code>justify-content: space-between</code> 将图标水平间距平均分布。* <strong>垂直排列：</strong> <code>feature-item</code> 类使用 <code>flex-direction: column</code> 将图标和文字垂直排列，并使用 <code>align-items: center</code> 将图标和文字居中对齐。* <strong>间距调整：</strong> 可以通过调整 <code>margin-bottom</code> 和 <code>margin-top</code> 来控制行与行之间以及文字与图标之间的间距。</li>
</ul>
<p>根据实际需求和样式要求，可以对代码进行调整以满足 specific 的布局需求。</p>