flex（弹性盒、伸缩盒）：
- 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
- flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变
弹性容器：
- 要使用弹性盒，必须先将一个元素设置为弹性容器
- 我们通过
display来设置弹性容器 display: flex设置为块级弹性容器display: inline-flex设置为行内弹性容器
弹性元素：
- 弹性容器的子元素是弹性元素（弹性项）
- 弹性元素可以同时是弹性容器
flex-direction 指定容器中弹性元素的排列方式：
主轴：弹性元素的排列方向称为主轴
侧轴：与主轴垂直方向的称为侧轴
可选值：
row 默认值，弹性元素在容器中水平排列（自左向右）
主轴 自左向右
row-reverse 弹性元素在容器中反向水平排列（自右向左）
主轴 自右向左
column 弹性元素纵向排列（自上向下）
主轴 自上向下
column-reverse 弹性元素反向纵向排列（自下向上）
主轴 自下向上
弹性元素的属性：
flex-grow 指定弹性元素的伸展系数
- 该值必须是数字，默认值是 0，所以默认不生效
- 父元素有多余空间时，会按照比例将多余空间分配给弹性元素，数值越大分配的越多
flex-shrink 指定弹性元素的收缩系数
- 该值必须是数字，默认值是 1，所以默认生效
- 当父元素中的空间不足以容纳所有的子元素时，会按算法对弹性元素进行收缩，收缩主要有两个条件：缩减系数、元素大小。举例：一个块很小，但是缩减系数大，另一个块很大，但是缩减系数小，按道理应该是缩减系数越大则缩得越小，但是这里的缩减算法是考虑了两个条件，所以基本上是块越大缩减得越多。
收缩的情况：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
width: 400px;
border: 10px red solid;
/* 将ul设置为弹性容器 */
display: flex;
/* 弹性元素在容器中水平排列 */
flex-direction: row;
}
li {
width: 200px;
height: 100px;
font-size: 50px;
text-align: center;
line-height: 100px;
/* flex-grow: 0; */
/* flex-shrink: 1; */
}
li:nth-child(1) {
background-color: #bfa;
/* flex-grow: 1; */
flex-shrink: 1;
}
li:nth-child(2) {
background-color: pink;
/* flex-grow: 2; */
flex-shrink: 2;
}
li:nth-child(3) {
background-color: orange;
/* flex-grow: 3; */
flex-shrink: 3;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
