191 lines
4.3 KiB
Markdown
191 lines
4.3 KiB
Markdown
# flex
|
||
|
||
flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
||
|
||
### flex 使用
|
||
|
||
任何一个元素都能被指定为flex 容器
|
||
|
||
```
|
||
display:flex 选中元素为块级元素时
|
||
|
||
display:inline-flex 选中元素为内联元素时
|
||
```
|
||
|
||
### 基本概念
|
||
|
||
通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
|
||
|
||
容器默认存在两个轴，水平主轴和垂直的交叉轴
|
||
|
||
水平主轴的起点叫做 main start 结束位置叫做 main end
|
||
|
||
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
||
|
||
|
||
|
||
注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row）
|
||
|
||
当 flex-direction 的值为column时 主轴为竖直 侧轴为水平
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
### 容器的属性
|
||
|
||
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
||
- row 水平（起点在左）
|
||
- column 垂直 （起点在上）
|
||
- row-reverse 水平（起点在右）
|
||
- column-reverse 垂直（起点在下）
|
||
|
||
- justify-content 声明排列的方式
|
||
- center 居中
|
||
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||
- space-between 两端对齐 项目之间的间隔都相等
|
||
- align-items 定义项目在交叉轴上的排列方式
|
||
- center 居中
|
||
- flex-start 交叉轴起点对齐（拓展）
|
||
- flex-end 交叉轴终点对齐
|
||
- baseline 第一行文字的基线对齐
|
||
- stretch 默认占满整个容器的高度
|
||
|
||
|
||
|
||
```
|
||
<!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: 水平居中
|
||
|
||
|
||
|
||
```
|
||
.box{
|
||
width: 1000px;
|
||
height: 500px;
|
||
background: pink;
|
||
display:flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
}
|
||
```
|
||
|
||
|
||
|
||
##### space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||
|
||
|
||
|
||
```
|
||
.box{
|
||
width: 1000px;
|
||
height: 500px;
|
||
background: pink;
|
||
display:flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
}
|
||
```
|
||
|
||
|
||
|
||
##### space-between 两端对齐 项目之间的间隔都相等
|
||
|
||
|
||
|
||
|
||
|
||
```
|
||
.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
|
||
|
||
 |