页面布局float与flex的区别

悠悠 2021-07-25 16:20 411阅读 0赞

使用`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>

二级菜单显示效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]

使用`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>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 1]

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

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

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

此处我们用6个  
![在这里插入图片描述][20210302204441590.png]  
并设置宽度与列表容器宽度一致，即可实现目标效果：如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]: /images/20210725/0b81bcaef23d4a2faadcb6045c44e3ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 1]: /images/20210725/8259553ac3df426bb74be5bb3560e88e.png
[Link 1]: https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/
[20210302204441590.png]: /images/20210725/a67dc650cf8949d98864ce7e044e0017.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 2]: /images/20210725/0a32313e90d34cbab8f67ad39ae25432.png