一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情。
flex-direction: row; 默认从左到右排列
2.flex-direction: row-reverse; 从右到左排列
- flex-direction: column; 从上到下排列
- flex-direction: column-reverse; 从下到上排列
5.flex-wrap: norwrap; 默认不换行,如果给整个盒子设置了宽度,不会换行,会自动修改子元素的大小
- flex-wrap: wrap; 撑满自动换行
- justify-content: flex-end; 右对齐和flex-direction: row-reverse;不同的是它的子元素会从最后一个开始从右到左排列
- justify-content: start; 左对齐,默认值
9. justify-content: center;
水平居中展示
- justify-content: space-between; 两端对齐,项目之间间隔相等
11.justify-content: space-around; 每个项目之间的间隔比项目两侧到边框的距离大一倍
- justify-content: space-evenly; 项目之间的距离和项目两侧到边框的距离相等,使用margin会有影响。
13.align-items: flex-start; 默认值,整体在垂直起点位置
-
align-items: flex-end; 整体在垂直终点位置
- align-items: center; 整体在垂直中间位置
- align-items: baseline; 给第一个项目设置文字,剩下的项目以第一个项目的文字为基准对齐
17.align-items: stretch; 默认值,不设置高度的话自适应高度