文章目录
- Flex布局
- 1.Flex组成
- 2.主轴与侧轴对齐方式
- 2.1 主轴对齐方式(横轴)
- 2.2 侧轴对齐方式 (纵轴)
- 2.3 修改主轴方向
- 3.弹性伸缩比
- 4.弹性换行与行对齐方式
- 4.1 弹性换行
- 4.2 行对齐方式
Flex布局
1.Flex组成
设置方式:给父元素设置display: flex，子元素可以自动挤压或拉伸
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向
- 侧轴/交叉轴:默认在垂直方向
分析:
| 自动设置,由代码实现. |
2.主轴与侧轴对齐方式
2.1 主轴对齐方式(横轴)
属性名: justify-content
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| sapce-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| sapce-aroud | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| sapce-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
分析:
| 前两个不常用,后四个是重点. |
2.2 侧轴对齐方式 (纵轴)
属性名
align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置).align-self:单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置)
| 属性值 | 效果 |
|---|---|
| stretch | 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸) |
| center | 弹性盒子沿侧轴居中排列 |
| flex-start | 弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| 前两个重点,后两个基本不用. |
2.3 修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名:flex-direction
属性值
| 属性值 | 效果 |
|---|---|
| row | 水平方向,从左到右(默认) |
| column | 垂直方向,从上到下 |
| row-reverse | 水平方向，从右向左 |
| column-reverse | 垂直方向，从下向上 |
分析:
| 只记colum. 修改主轴方向垂直方向;侧轴自动变换到水平方向 |
3.弹性伸缩比
作用︰控制弹性盒子的主轴方向的尺寸。
属性名: flex
属性值:整数数字，表示占用父级剩余尺寸的份数。
分析:
| 默认情况下，主轴方向尺寸是靠内容撑开:侧轴默认拉伸 |
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局-弹性伸缩比</title>
<style>
/* 默认情况下，主轴方向尺寸是靠内容撑开；侧轴默认拉伸 */
.box {
display: flex;
flex-direction: column;
height: 300px;
border: 1px solid #000;
}
.box div {
/* height: 100px; */
background-color: pink;
}
.box div:nth-child(1) {
width: 200px;
}
.box div:nth-child(2) {
flex: 1;
}
.box div:nth-child(3) {
flex: 2;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
4.弹性换行与行对齐方式
4.1 弹性换行
弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。
属性名: flex-wrap
属性值
- wrap:换行
- nowrap:不换行（默认)
4.2 行对齐方式
属性名: align-content
属性值
| 属性值 | 效果 |
|---|---|
| flex-start | 默认值，弹性盒子从起点开始依次排列 |
| flex-end | 弹性盒子从终点开始依次排列 |
| center | 弹性盒子沿主轴居中排列 |
| sapce-between | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间 |
| sapce-aroud | 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧 |
| sapce-evenly | 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 |
分析:
| 跟主轴对齐方式是一样的 行对齐方式:对单行弹性盒子不生效 |
