flex

目录

属性

1. align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

基本位置对齐

/*align-content不采用左右值 */
align-content: center;     /* 将项目放置在中点 */
align-content: start;      /* 最先放置项目 */
align-content: end;        /* 最后放置项目 */
align-content: flex-start; /* 从起始点开始放置flex元素 */
align-content: flex-end;   /* 从终止点开始放置flex元素 */

默认对齐

align-content: normal;

基线对齐

align-content: baseline;
align-content: first baseline;
align-content: last baseline;

分布式对齐

align-content: space-between; /* 均匀分布项目第一项与起始点齐平，最后一项与终止点齐平 */

align-content: space-around;  /* 均匀分布项目项目在两端有一半大小的空间*/

align-content: space-evenly;  /* 均匀分布项目项目周围有相等的空间 */

align-content: stretch;       /* 均匀分布项目拉伸‘自动’-大小的项目以充满容器 */

溢出对齐

align-content: safe center;
align-content: unsafe center;

全局属性

align-content: inherit; /* 继承 */
align-content: initial;  /* 初始值 */
align-content: unset; /* 未设置 */

2. aligin-items 侧轴对齐（y轴）

3. align-self 侧轴上单个项目对齐方式

4. flex

5. flex-basis

6. flex-direction 主轴的方向（横向x轴）

7. flex-flow

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

8. flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

9. flex-shrink 收缩比率

10. flex-wrap

11. justify-content 定义了项目在主轴上的对齐方式

12. order 项目的排列顺序。数值越小，排列越靠前，默认为0。

posted @ 2019-08-03 16:22  dobeco  阅读(228)  评论(0)  编辑  收藏  举报