flex弹性盒模型

216 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情

flex-direction: row; 默认从左到右排列

1.png

2.flex-direction: row-reverse; 从右到左排列

2.png

  1. flex-direction: column; 从上到下排列

3.png

  1. flex-direction: column-reverse; 从下到上排列

4.png

5.flex-wrap: norwrap; 默认不换行,如果给整个盒子设置了宽度,不会换行,会自动修改子元素的大小

5.png

  1. flex-wrap: wrap; 撑满自动换行

6.png

  1. justify-content: flex-end; 右对齐和flex-direction: row-reverse;不同的是它的子元素会从最后一个开始从右到左排列

7.png

  1. justify-content: start; 左对齐,默认值

9.png 9. justify-content: center; 水平居中展示

8.png

  1. justify-content: space-between; 两端对齐,项目之间间隔相等

10.png

11.justify-content: space-around; 每个项目之间的间隔比项目两侧到边框的距离大一倍

11.png

  1. justify-content: space-evenly; 项目之间的距离和项目两侧到边框的距离相等,使用margin会有影响。

12.png

13.align-items: flex-start; 默认值,整体在垂直起点位置

13.png

  1. align-items: flex-end;
        整体在垂直终点位置
    

14.png

  1. align-items: center; 整体在垂直中间位置

15.png

  1. align-items: baseline; 给第一个项目设置文字,剩下的项目以第一个项目的文字为基准对齐

16.png

17.align-items: stretch; 默认值,不设置高度的话自适应高度

17.png