flex容器
1.术语
- 任何属性都可以添加 display：flex 属性转为弹性盒子。
- 转为flex元素（容器）之后，内部子元素（项目）就能使用flex布局了。
- 容器内的项目自动转为‘行内块元素’（不管之前是什么类型）
1.容器，具有display：flex的属性元素，flex容器。
2.项目，flex 容器的子元素。
3.主轴，项目排列的轴线。
4.交叉轴，与主轴垂直的轴线。
<!DOCTYPE html><html lang="en"><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>D</title><style>.box {/* 转为flex容器 */display: flex;}</style></head><body><!-- 容器 --><div class="box"><!-- 子元素（项目） --><div>项目</div><div>项目</div><div>项目</div><div>项目</div><div>项目</div></div></body></html>
2.容器属性
- 用在容器上的属性。
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex-flow |
主轴方向与换行方式 |
| 2 | justify-content |
项目在主轴上的对齐方式 |
| 3 | align-items |
项目在交叉轴上的对齐方式 |
| 4 | align-content |
项目在多行容器中的对齐方式 |
1.flex-flow 主轴方向与换行方式。
.box {/* 单行容器 *//* 水平排列 不换行 */flex-flow: row nowrap;/* 多行容器 *//* 水平排列 换行 */flex-flow: row wrap;}.box {/* 垂直排列 */flex-flow: column nowrap;/* 垂直排列 换行 */flex-flow: column wrap;}
2.justify-content 项目在主轴上的对齐方式
.box {/* 空间分配二种方案: *//* 1. 将所有项目视为一个整体,在项目组二边进行分配 *//* 默认 */justify-content: flex-start;/* 靠在右边 */justify-content: flex-end;/* 居中 */justify-content: center;/* 2. 将项目视为一个个独立的个体,在项目之间进行分配 *//* 二端对齐 */justify-content: space-between;/* 分散对齐 */justify-content: space-around;/* 平均对齐 */justify-content: space-evenly;}
- 3.align-items 项目在交叉轴上的对齐方式
单行容器没有二端对齐、分散对齐、平均对齐的方式。/* 交叉轴上的对齐方案 */.container {/* 默认拉伸 */align-items: stretch;align-items: flex-start;align-items: flex-end;align-items: center;}
4.align-content 项目在多行容器中的对齐方式。
多行容器，把所有项目看成一个整体。.container {flex-flow: row wrap;align-content: stretch;align-content: flex-start;align-content: flex-end;align-content: center;align-content: space-between;align-content: space-around;align-content: space-evenly;}
3.项目属性
| 序号 | 属性 | 描述 |
|---|---|---|
| 1 | flex |
项目的缩放比例与基准宽度 |
| 2 | align-self |
单个项目在交叉轴上的对齐方式 |
| 3 | order |
项目在主轴上排列顺序 |
1.flex
/* 项目属性flex */.container .item {/* flex: flex-grow flex-shrink flex-basis *//* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 *//* 默认会上,不放大或收缩 */flex: 0 1 auto;flex: initial;/* 允许放大和收缩 */flex: 1 1 auto;flex: auto;/* 禁止放大和收缩 */flex: 0 0 auto;flex: none;/* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */flex: 1;/* 等于 flex: 1 1 auto; */flex: 2;flex: 3;/* flex通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */}
2.align-self
/* 例如设置第2个项目与其它项目的对齐方式不一样 */.container>.item:nth-of-type(2) {align-self: stretch;align-self: flex-start;align-self: flex-end;align-self: center;/* 同样支持定位 */position: absolute;left: 2em;top: 3em;}
- 3.order
显示顺序:默认按书写的源码顺序排列
默认序号越小越靠前,越大越靠后
支持负值