收藏
天蓬老师批改状态：合格
老师批语：
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>
| 序号 | 属性 | 描述 |
|---|---|---|
| 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;}
/* 交叉轴上的对齐方案 */.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;}
| 序号 | 属性 | 描述 |
|---|---|---|
| 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;}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
