文章目录
一、定义
flex为“弹性布局”，用来为盒状模型提供最大的灵活性。
二、作用
-
能够能加高效、方便的控制元素的对齐、排列
-
可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
-
控制元素在页面的布局方向
-
按照不同于dom所指定排序方式对屏幕上的元素重新排列
主要记为以下： -
解决元素居中问题
-
自动弹性伸缩，赫斯适配不同大小的屏幕、和移动端
三、理解
采用flex布局的元素，称为flex容器，简称容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目
- 默认水平方向为主轴
- 默认垂直方向为交叉轴、侧轴
- 项目默认沿主轴排列
四、flex的常见术语
| 序号 | 简记 | 术语 |
|---|---|---|
| 1 | 二成员 | 容器和项目（container/item) |
| 2 | 二根轴 | 主轴和交叉轴（main-axis/cross-axis) |
| 3 | 二根线 | 起始线（main/cross-start)与结束线（main/cross-end) |
 |
五、容器container的属性
1.flex-direction 主轴方向
2.flex-wrap 主轴一行满了换行
3.flex-flow 1和2的组合
4.justify-content 主轴元素对齐方式
5.align-items 交叉轴元素对齐方式//单行
6.align-content 交叉轴行对齐//多行
1.flex-direction主轴方向
row(默认值）：主轴为水平方向，起点在左端
row-reverse:主轴为水平方向，起点在右端
column:主轴为垂直方向，起点在上沿
colum-reverse:主轴为垂直方向，起点在下沿
2.flex-wrap主轴一行满了换行
nowrap（默认值）不换行压缩宽度
wrap 换行
wrap-reverses 反向换行
3.flex-flow是1和2的组合
flex-flow:[flex-direction] [flex-wrap]
4.flex-content是主轴元素对齐方式
注意，这里是主轴元素对齐方式，区别于flex-direction
1.flex-start (默认）靠着main-start对齐，一般是左方向
2.flex-end 靠着main-end对齐，一般是右方向
3.center 靠着主轴居中对齐，一般是居中对齐
4.space-bewteen 两端对齐，靠着容器壁，剩余空间平分
5.space-around 分散对齐，补考这容器壁，剩余空间在每个项目二侧平均分配
6.space-evenly 平均对齐，补考这容器壁，剩余空间平分
5.align-items item[项目]在交叉轴上对齐方式 [单轴]
这个是container容器的属性，设置的是items项目元素在交叉轴上对齐样式
flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的终点对齐
baseline：项目的第一行文字的基线对齐
stretch(默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度
6.align-content 交叉轴行对齐方式 多行
这个和justify-content属性一模一样
flex-start (每一行)(默认)靠着cross-start对齐//参考常见术语(一般是左方向)
flex-end （每一行)靠着cross-end对齐//参考常见术语(一般是右方向)
center (每一行)靠着cross线居中对齐//一般就是居中对齐
space-between (每一行)两端对齐，靠着容器上下壁，剩余空间平分
space-around (每一行)分散对齐，不靠着容器壁，剩余空间在每个项目二侧平均分配
strentch (每一行)伸缩，占满整个高度
六、项目元素item的属性
- 在该容器主轴上存在剩余空间时，flex-grow才有意义
- 该属性的值，称为放大因子
flex-grow:长大
flex-shrinik：缩小
align-self:覆盖container align-items属性
order:排序
flex-basis：有效宽度
1.flex-grow长大
0 默认值，不放大，保持初始值
initial 设置默认值，与0同级
n 放大因子：正数
2.flex-shrink缩小
- 当容器主轴”空间不足“且”禁止换行“时，
flex-shrink才有意义
1 默认值，允许项目收缩
initial 设置初始默认值，与1等效
0 禁止收缩，保持原始尺寸
n 收缩因子：正数
<!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>
.container{
display: flex;
height: 800px;
width: 400px;
background-color: rgb(219, 219, 219);
flex-direction: row;
flex-wrap: nowrap;
align-content: flex-start;
}
.item{
width: 200px;
height: 200px;
font-size: 1.5rem;
/* 禁止收缩 */
flex-shrink: 0;
}
.item1{
flex-shrink: 1;
}
.item2{
flex-shrink: 0;
}
.item3{
flex-shrink: 3;
}
/* container 容器的宽度是 400,3个字元素总宽度是 600 超过了 200
然后按照比例缩小到这些元素上 200/4 = 50
item1 缩小 50 * 1 = 50,还剩 150
item2 不缩小
item3 缩小 50 * 3 = 150 还剩 50
*/
</style>
<body>
<div class="container">
<div class="item item1" style="background-color: antiquewhite;">1</div>
<div class="item item2" style="background-color: aqua;">2</div>
<div class="item item3" style="background-color: aquamarine;">3</div>
</div>
</body>
</html>
3、align-self: 覆盖container align-items 属性
- 该属性可覆盖容器的
align-items,用以自定义某个项目的对齐方式
auto 默认值，继承align-items属性值
flex-start 与交叉轴起始线对齐
flex-end 与交叉轴终止线对齐
center 与交叉轴中间线对齐：居中对齐
stretch 在交叉轴方向上拉伸
baseline 与基线对齐（与内容相关用的极少）
4、order排序
就是将元素重新排列
<!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>
.container{
display: flex;
height: 800px;
background-color: rgb(219, 219, 219);
}
.item{
width: 200px;
height: 200px;
order: 0;
}
.item1{
order: 3;
}
</style>
<body>
<div class="container">
<div class="item item1" style="background-color: antiquewhite;">1</div>
<div class="item item2" style="background-color: aqua;">2</div>
<div class="item item3" style="background-color: aquamarine;">3</div>
</div>
</body>
</html>
5、flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，也就是项目的本来大小
.item {
flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px)，则项目将占据固定空间。
总结
参考添加链接描述，整理一下加强记忆。
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
