页面布局float与flex的区别

使用float： left：

<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1" @click="onClick('/')">csdn</el-menu-item>
      <el-menu-item index="2" @click="onClick('/')">float</el-menu-item>

      <el-menu-item index="3">
        <el-dropdown @command="onClick">
          <span class="el-dropdown-link"
            >二级菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-container v-for="(items, index) in menu" :key="index">
              <el-main>
                <el-dropdown-item
                  v-if="items.sortTitle"
                  v-text="items.sortTitle"
                  disabled
                  class="dropdown-sortTitle"
                ></el-dropdown-item>
                <el-dropdown-item
                  v-for="(a, aindex) in menu[index].dropdownItem"
                  :key="aindex"
                  :command="a.link"
                >
                  {{ a.title }}</el-dropdown-item
                >
              </el-main>
            </el-container>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped>
.el-dropdown-menu {
  width: 1250px;
  height: 800px;
  padding: 10px;
  font-size: 16px;
}

.el-dropdown-menu .el-container {
  width: 200px;
  float: left;
  border-left: 1px solid #eee;
}

.el-dropdown-link {
  color: #fff;
}

.dropdown-sortTitle {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: black;
}
</style>

二级菜单显示效果如下

使用display：flex：

<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1" @click="onClick('/')">csdn</el-menu-item>
      <el-menu-item index="2" @click="onClick('/')">flex</el-menu-item>

      <el-menu-item index="3">
        <el-dropdown @command="onClick">
          <span class="el-dropdown-link"
            >二级菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-container v-for="(items, index) in menu" :key="index">
              <el-main>
                <el-dropdown-item
                  v-if="items.sortTitle"
                  v-text="items.sortTitle"
                  disabled
                  class="dropdown-sortTitle"
                ></el-dropdown-item>
                <el-dropdown-item
                  v-for="(a, aindex) in menu[index].dropdownItem"
                  :key="aindex"
                  :command="a.link"
                >
                  {{ a.title }}</el-dropdown-item
                >
              </el-main>
            </el-container>
            <i></i><i></i><i></i><i></i><i></i><i></i>
          </el-dropdown-menu>
        </el-dropdown>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style >
* {
  margin: 0;
  padding: 0;
  /*font-size: 16px;*/
}
.el-menu.el-menu--horizontal {
  border-bottom: none;
}
.el-dropdown {
  text-align: left;
}
.el-dropdown-menu {
  width: 1250px;
  height: 800px;
  display: flex;
  flex-wrap: wrap;
}

.el-dropdown-menu > .el-container {
  width: 200px;
}
.el-dropdown-menu > i {
  width: 200px;
}

.el-dropdown-link {
  color: #fff;
}

.dropdown-sortTitle {
  font-weight: bold;
  color: black !important;
  border-bottom: 1px solid #ececec;
}
</style>

效果如下：

期待的是每行显示6个子级菜单，由于一共有11个，使第二行不满6个，会造成布局混乱，如何在使用flex布局时，最后一行列表左对齐呢?
参考链接

此时我们在第36行代码增加了占位符<i></i>

具体的占位数量是由最多列数的个数决定的，例如这个布局最多7列，那我们可以使用7个空白标签进行填充占位，最多10列，那我们需要使用10个空白标签。

此处我们用6个

并设置宽度与列表容器宽度一致，即可实现目标效果：如下图