2021-01-05 09:18:22 +08:00
|
|
|
|
# flex
|
|
|
|
|
|
|
|
|
|
|
|
flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
|
|
|
|
|
|
|
|
|
|
|
### flex 使用
|
|
|
|
|
|
|
|
|
|
|
|
任何一个元素都能被指定为flex 容器
|
|
|
|
|
|
|
|
|
|
|
|
```
|
2021-03-23 10:58:10 +08:00
|
|
|
|
display:flex 选中元素为块级元素时
|
2021-01-05 09:18:22 +08:00
|
|
|
|
|
2021-03-23 10:58:10 +08:00
|
|
|
|
display:inline-flex 选中元素为内联元素时
|
2021-01-05 09:18:22 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 基本概念
|
|
|
|
|
|
|
|
|
|
|
|
通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
|
|
|
|
|
|
|
|
|
|
|
|
容器默认存在两个轴，水平主轴和垂直的交叉轴
|
|
|
|
|
|
|
|
|
|
|
|
水平主轴的起点叫做 main start 结束位置叫做 main end
|
|
|
|
|
|
|
|
|
|
|
|
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
|
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row）
|
|
|
|
|
|
|
|
|
|
|
|
当 flex-direction 的值为column时 主轴为竖直 侧轴为水平
|
|
|
|
|
|
|
2021-03-23 10:58:10 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
### 容器的属性
|
|
|
|
|
|
|
|
|
|
|
|
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
2021-03-23 10:58:10 +08:00
|
|
|
|
- row 水平（起点在左）
|
|
|
|
|
|
- column 垂直 （起点在上）
|
|
|
|
|
|
- row-reverse 水平（起点在右）
|
|
|
|
|
|
- column-reverse 垂直（起点在下）
|
|
|
|
|
|
|
2021-01-05 09:18:22 +08:00
|
|
|
|
- justify-content 声明排列的方式
|
|
|
|
|
|
- center 居中
|
|
|
|
|
|
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
|
|
|
|
|
- space-between 两端对齐 项目之间的间隔都相等
|
|
|
|
|
|
- align-items 定义项目在交叉轴上的排列方式
|
|
|
|
|
|
- center 居中
|
|
|
|
|
|
- flex-start 交叉轴起点对齐（拓展）
|
|
|
|
|
|
- flex-end 交叉轴终点对齐
|
|
|
|
|
|
- baseline 第一行文字的基线对齐
|
2021-01-20 18:33:56 +08:00
|
|
|
|
- stretch 默认占满整个容器的高度
|
|
|
|
|
|
|
2021-03-23 10:58:10 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
*{
|
|
|
|
|
|
margin:0;
|
|
|
|
|
|
padding:0;
|
|
|
|
|
|
}
|
|
|
|
|
|
.box{
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
background: pink;
|
|
|
|
|
|
display:flex; //声明容器为弹性盒子
|
|
|
|
|
|
flex-direction: row; //声明排列的方向为水平和竖直
|
|
|
|
|
|
align-items: center;//垂直排列方式
|
|
|
|
|
|
justify-content: center； //水平排列方式
|
|
|
|
|
|
}
|
|
|
|
|
|
.left{
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 200px;
|
|
|
|
|
|
background: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
.right{
|
|
|
|
|
|
width: 200px;
|
|
|
|
|
|
height: 200px;
|
|
|
|
|
|
background: blue;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<div class="left"></div>
|
|
|
|
|
|
<div class="right"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### justify-content
|
|
|
|
|
|
|
|
|
|
|
|
##### center: 水平居中
|
|
|
|
|
|
|
2021-03-23 10:58:10 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.box{
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
background: pink;
|
|
|
|
|
|
display:flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### space-around 每个项目两侧的间隔相等 项目到边框有间距
|
|
|
|
|
|
|
2021-03-23 10:58:10 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.box{
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
background: pink;
|
|
|
|
|
|
display:flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: space-around;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
##### space-between 两端对齐 项目之间的间隔都相等
|
|
|
|
|
|
|
2021-03-23 10:58:10 +08:00
|
|
|
|
|
2021-01-20 18:33:56 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
.box{
|
|
|
|
|
|
width: 1000px;
|
|
|
|
|
|
height: 500px;
|
|
|
|
|
|
background: pink;
|
|
|
|
|
|
display:flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#### align-items
|
|
|
|
|
|
|
|
|
|
|
|
定义侧轴的项目对齐方式
|
|
|
|
|
|
|
|
|
|
|
|
作业1：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业2：
|
|
|
|
|
|
|
|
|
|
|
|
实现flex-内容宽度等分
|
|
|
|
|
|
|
|
|
|
|
|
作业3：
|
|
|
|
|
|
|
|
|
|
|
|
左右布局，一侧定宽一侧自适应填满
|
|
|
|
|
|
|
|
|
|
|
|
作业4：
|
|
|
|
|
|
|
|
|
|
|
|
未知高度上下左右居中
|
|
|
|
|
|
|
|
|
|
|
|
作业6：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业7：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
作业8
|
|
|
|
|
|
|
|
|
|
|
|
|
