持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情
flex 我相信大姐已经非常的熟悉他了，他是css布局的一种方式，简便又好用，前面也花了几篇写过flex相关知识，没有看过的可以去看一下，可以看阮一峰的这篇flex讲解，说的非常明白。[ ](Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com))。
回顾flex：
这一节讲一下flex:1 是什么作用，我们来看一下吧
想要梳理清晰flex:1的含义，我们先学习下flex 这个css属性表达了哪些含义
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
从这里就可以推导出
flex: 1
相当于
flex: 1 1 auto.
相当于
flex-grow: 1
flex-shrink: 1
flex-basix: 0%
-
flex:1实际代表的是三个属性的简写
- flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比
- flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例
- flex-basis是用来设置盒子的基准宽度，并且basis和width同时存在basis会把width干掉
-
flex：1；的逻辑就是用flex-basis把width干掉，然后再用flex-grow和flex-shrink增大的增大缩小的缩小，达成最终的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.box {
width: 500px;
height: 100px;
background-color: hotpink;
display: flex;
}
.box div {
width: 100px;
}
.box div:nth-child(1) {
flex-grow: 1;
}
.box div:nth-child(2) {
flex-grow: 3;
}
.box div:nth-child(3) {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
父盒子剩余空间的200
- 第一个盒子扩大1/5
- 第二个盒子扩大3/5
- 第三个盒子扩大1/5
代码如下
<style>
.container {
display: flex;
width: 600px;
height: 300px;
margin: 10px auto;
}
.div {
border: 3px solid #ff6600;
flex: 1;
line-height: 300px;
text-align: center;
}
</style>
<div class="container">
<div class="div">盒子 1</div>
<div class="div">盒子 2</div>
<div class="div">盒子 3</div>
</div>
利用 flex: 1; 确实实现了三个不同内容的 div 平分空间, 所以按我以前的想法来说:
flex: 1; === flex: 1 1 auto;
这是完整写法, 它还有另外两种完整写法, 分别是 initial (0 1 auto) 和 none (0 0 auto)
- 第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
- 第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
- 第三个参数表示: flex-basis 给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小
auto 为表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照自己内容的多少来等比例的放大和缩小, 所以出现了上图中三个盒子不一样大的情况
现在你知道 flex: 1; 为什么能平分元素了吧, css是比较难学难记住，得要多加练习，去验证，比如 margin: auto 为什么会实现居中, overflow: hidden 为何能实现 BFC
