Flex属性整理

简单整理Flex的属性导图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
flex基本概念
    -- 轴
        --  主轴       main axis
        --  交叉轴     cross axis
    -- 容器
        -- 父容器      contanier
        -- 子容器      children

容器
    -- 父容器contanier
        -- justify-content      设置子容器在主轴上的对齐方式
            -- flex-start       起始端对齐
            -- flex-end         末尾段对齐
            -- center           居中对齐
            -- space-around     子容器目两侧的间隔相。位于首尾两端的子容器到父容器的距离是子容器间距的一半。
            -- space-between    两端对齐，子容器之间的间隔都相等。

        -- align-items          设置子容器在交叉轴上的对齐方式
            -- flex-start       起始端对齐
            -- flex-end         末尾段对齐
            -- center           居中对齐
            -- baseline         子容器的第一行文字的基线对齐
            -- stretch（默认）   如果项目未设置高度或设为auto，子容器拉伸至将占满整个容器的高度。

        -- flex-direction       设置主轴的方向（即项目的排列方向）
            -- row（默认值）      主轴为水平方向，起点在左端
            -- row-reverse      主轴为水平方向，起点在右端
            -- column           主轴为垂直方向，起点在上沿
            -- column-reverse   主轴为垂直方向，起点在下沿

        -- flex-wrap            设置换行方式
            -- nowrap           不换行
            -- wrap             换行
            -- wrap-reverse     换行，第一行在下方
        -- flex-flow            flex-direction 与 flex-wrap 的缩写

        -- align-content
            -- flex-start
            -- flex-end
            -- center
            -- space-between
            -- space-around
            -- stretch


    -- 子容器children
        -- flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
            -- 一个值：
                -- 带单位        flex-basis: 10em | 10px | 10rem | 10%
                -- 无单位        flex-grow: 1 (定义项目的放大比例，默认为0)
                -- none:        0 0 auto
                -- auto:        1 1 auto
            -- 两个值：
                -- flex-frow flex-basix : 1 10rem
                -- flex-grow flex-shink : 1 1
            -- 三个值：
                -- flex-grow flex-shrink flex-basis: 1 1 10rem

        -- align-self
            -- flex-start       起始端对齐
            -- flex-end         末尾段对齐
            -- center           居中对齐
            -- baseline         子容器的第一行文字的基线对齐
            -- stretch（默认）   拉伸对齐

        -- order                改变子容器的排列顺序, 数值越小排列越靠前。默认值为 0，可以为负值。

        -- flex-grow            子容器弹性伸展的比例 默认为0

        -- flex-shrink          子容器弹性收缩的比例 默认为1

        -- flex-basis           子容器的原始固定尺寸