1. 什么是Flexbox
- 现代CSS布局模型
- 一维布局解决方案
- 容器与项目的概念
2. Flex容器属性
.container {
display: flex; /* 启用Flex布局 */
flex-direction: row; /* 主轴方向 */
}
如果不使用flex-direction属性，则默认为flex-direction: row
3. Flex项目属性
.item {
flex: 1 2 500px; /* flex-grow | flex-shrink | flex-basis */
}
- flex-grow : 1
- 定义项目的放大比例
- 当容器有剩余空间时，该项目将获得1份剩余空间
- flex-shrink : 2
- 定义项目的缩小比例
- 当空间不足时，该项目将以2倍于其他项目的比例收缩
- flex-basis : 500px
- 定义项目在分配多余空间之前的初始大小
- 这里设置为500像素
Flex如何计算分配的空间
若有剩余空间可以分配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 300px;
background-color: red;
}
.right {
flex: 2 1 200px;
background-color: blue;
}
</style>
<body>
<div class="container">
<!-- FFC 弹性格式化上下文 -->
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
比如上面代码中的例子，计算left和right的width所占据的空间为多少？
首先left和right初始分别由300px和200px,而实际总空间由600px,故剩下600 - 300 - 200 = 100px的空间可以进行分配。因为是有多余的空间进行分配，所以应该看flex-grow这一属性，可以看到left的为1，right的为2。 故left分配1 / (1 + 2) = 1/3，right分配 2 / (1 + 2) = 2/3。 最后空间为left = 1/3 * 100 + 300, right = 2/3 * 100 + 200.
若空间溢出，要进行空间收缩时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 弹性布局</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
width: 600px;
height: 300px;
}
.left {
flex: 1 2 500px;
background-color: red;
}
.right {
flex: 2 1 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
可以看到这时总空间container的width只有600px，而left和right的初始空间之和为500px + 400px = 900px。
可以发现溢出了900 - 600 = 300px，因为是空间要收缩，所以要看flex-shrink属性，可以看到left和right的flex-shrink属性分别为2 , 1。
所以得先计算总的权重=left-shrink * left-basis + right-shrink * right-basis = 2 * 500 + 1 * 400 = 1400。
然后分别计算要收缩的空间
left: left-shrink * left-basis / 总权重 = 2 * 500 / 1400
right: right-shrink * right-basis / 总权重 = 1 * 400 / 1400
最后用它们的初始空间减去要收缩的空间，即是它们最终的空间大小。
left: 500 - (2 * 500 / 1400)
right: 400 - (1 * 400 / 1400)
