css Flex布局心得

Flex经验分享

今天写后台管理系统的时候，自觉写css太差，补了一些flex布局的知识，在这里记录心得。主要参考菜鸟教程

---

flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
css语法：
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

值	属性
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
auto	与 1 1 auto 相同。
none	与 0 0 auto 相同。
initial	设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

---

flex布局基本使用

<!-- html-->
<div class="container">
    <div class="left"></div>
     <div class="middle"></div>
     <div class="right"></div>
</div>

<!--css-->
.container{
            display: flex;height: 300px;
        }
  .left{
          flex: 0 0 100px;//这里是关键，对于不想要伸缩的就按固定的宽度写死。其他的部分可以用flex：数字;来决定
          background-color: red;
      }
  .middle{
          flex: 0 0 100px;
          background-color: green;
      }
  .right{
          flex: 1;
          background-color: blue;
      }

效果：

实战

对于一个导航头，用flex布局呈现

<div style="font-size: 12px; border-bottom: 1px solid #ccc; line-height: 60px;display: flex;">
        <div style="font-size: 20px;flex: 0 0 300px;display: flex">
            <div>
                <span :class="collapseBtnClass" style="cursor: pointer" @click="isCollapseBtn"></span>
            </div>

            <div>
                <el-breadcrumb separator="/" style="margin-left: 20px;line-height: 60px">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <div style="flex: 1"></div>//用这个多余的div标签挤占掉多余的空白，让前面和后面两个flex盒子不必因为它的空间该怎么分而受到影响
        <el-dropdown style="width: 80px; cursor: pointer" size="small">
            <span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item >退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>

总结

以上就是记录的css flex布局小技巧