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布局小技巧