03的开发日志
0%

Flex布局学习笔记

发表于 更新于 分类于
本文字数： 10k 阅读时长 ≈ 9 分钟
  1. Flex布局学习笔记
  2. 测试页面
  3. 简介
    1. 基本概念
    2. 设置Flex的方法
  4. Flex容器（父元素）的属性
  5. Flex项目（子元素）的属性
  6. 试验Flex布局的简单网页
  7. Flex容器属性详解
    1. flex-direction
    2. flex-wrap
    3. flex-wrap
    4. justify-content
    5. align-items
    6. align-content
  8. Flex项目属性详解
    1. order
    2. flex-grow
    3. flex-shrink
    4. flex-basis
    5. flex
    6. align-self

Flex布局学习笔记

参考资料：

Flex 布局教程：语法篇 | 阮一峰

Flex 布局教程：实例篇 | 阮一峰

测试页面

pages/flex-test

简介

基本概念

Flex布局是一种CSS布局，由W3C联盟于2009年提出，可以简便、完整、响应式地实现各种页面布局，浏览器的支持情况如下图所示。

image-20210628013753185

Flex布局全称Flexible Box，即弹性布局。采用Flex布局需要分清容器（Flex Container）和项目（Flex Item）的概念。Flex容器是一个用于参照的外壳，其内部的元素为Flex项目。任何元素都可以设置为Flex容器，包括行内元素。

image-20210628015434116

如上图所示，Flex容器中存在主轴（main axis）和交叉轴（cross axis），分别用main start, main end, cross start, cross end表达它们的起始位置，可以简单理解为坐标轴原点位于左上角。Flex容器中的项目默认沿着主轴方向排列，使用main size和cross size分别表示Flex项目的宽高。

设置Flex的方法

注意：将父元素设置为Flex布局后，子元素的float, clear, vertical-align属性将失效。

任何容器都可以设置为flex容器：

1
2
3
.box {
    display: flex;
}

甚至是行内元素：

1
2
3
.inline-box {
    display: inline-flex;
}

对于Webkit内核的浏览器（Safari, Chrome等），需要加上-webkit前缀：

1
2
3
4
.box {
    display: -webkit-flex;  /* Safari */
    display: flex;
}

Flex容器（父元素）的属性

Flex容器是Flex布局的外壳，作为父元素，其中的子元素自动成为Flex项目。包含以下六个属性：

  • flex-direction: 决定主轴的方向，即子元素的排列方向，默认为row；
  • flex-wrap: 定义了子元素的换行规则，默认为nowrap；
  • flex-flow: 是direction和wrap和缩写，控制方向和换行规则，默认为row nowrap；
  • justify-content: 定义了子元素在主轴上（横向）的对齐方式，默认为flex-start；
  • align-items: 定义了子元素在交叉轴上（纵向）的对齐方式，默认为stretch；
  • align-content: 定义了多跟主轴的在交叉轴方向上（纵向）的对齐方式，若只有一根主轴，则该属性无效，默认为stretch。

Flex项目（子元素）的属性

位于Flex容器中的元素称为Flex项目，可以通过对其进行设置，控制其在父元素Flex容器中的位置，包含以下六个属性：

  • order: 定义项目的排列顺序。数值越小，排列越靠前，默认为0；
  • flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；
  • flex-shrink: 当一行的元素默认宽度大于容器时起作用，默认为1。为0时表示绝不收缩，不为0时，将一行的所有元素的该属性值统计起来，根据每一个元素的对应比例减少宽度，该值越大被扣掉的宽度越多；
  • flex-basis: 定义了子元素在Flex布局容器中沿着主轴方向的宽度。其凌驾于width和height属性之上，例如，当主轴为横轴时，设定该属性为某一固定px值后，无论设置width为多少时，都不会改变其宽度，主轴为纵轴时同理。当主轴空间不足时，将根据所有子元素的flex-basis的值进行等比例缩放，若该值为auto，则将子元素的宽度加入比例中计算，若该值为某一像素值，则直接加入比例中。
  • flex: 是flex-grow, flex-shrink, flex-basis的缩写，控制子元素的缩放和宽度，默认为0 1 auto，可以简写为auto或none：auto = 1 1 auto, none = 0 0 auto；
  • align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

试验Flex布局的简单网页

写了一个简单的网页来测试Flex布局容器的效果。

image-20210628120620725

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 布局</title>
    <script src="./js/vue.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
        }

        #app {
            position: relative;
            text-align: center;
            padding: 20px;
            padding-top: 0;
        }

        .box {
            display: flex;
            border: 1px dashed rgba(0, 0, 0, 0.5);
            margin: 20px 0;
        }

        .box-child {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>Flex布局试验</h1>
        <div style="width: 100%;text-align: left;">
            <b>容器设置</b> <br>
            高度：<input v-model="boxStyle.height"> 宽度：<input v-model="boxStyle.width"> <br>
            flex-direction:
            <select v-model="boxStyle['flex-direction']">
                <option value="row">row</option>
                <option value="row-reverse">row-reverse</option>
                <option value="column">column</option>
                <option value="column-reverse">column-reverse</option>
            </select> <br>
            flex-wrap:
            <select v-model="boxStyle['flex-wrap']">
                <option value="nowrap">nowrap</option>
                <option value="wrap">wrap</option>
                <option value="wrap-reverse">wrap-reverse</option>
            </select> <br>
            flex-flow: <input v-model="boxStyle['flex-flow']"> <br>
            justify-content:
            <select v-model="boxStyle['justify-content']">
                <option value="flex-start">flex-start</option>
                <option value="flex-end">flex-end</option>
                <option value="center">center</option>
                <option value="space-between">space-between</option>
                <option value="space-around">space-around</option>
            </select> <br>
            align-items:
            <select v-model="boxStyle['align-items']">
                <option value="flex-start">flex-start</option>
                <option value="flex-end">flex-end</option>
                <option value="center">center</option>
                <option value="baseline">baseline</option>
                <option value="stretch">stretch</option>
            </select> <br>
            align-content:
            <select v-model="boxStyle['align-content']">
                <option value="flex-start">flex-start</option>
                <option value="flex-end">flex-end</option>
                <option value="center">center</option>
                <option value="space-between">space-between</option>
                <option value="space-around">space-around</option>
                <option value="stretch">stretch</option>
            </select> <br>

            <b>子元素设置</b>
            <br>
            高度：<input v-model="itemStyle.height"><button @click="randomItemHeight">随机高度</button> 宽度：<input
                v-model="itemStyle.width"> <br>
            order: <input type="number" v-model="itemStyle.order"><br>
            flex-grow: <input type="number" v-model="itemStyle['flex-grow']"><br>
            flex-shrink: <input type="number" v-model="itemStyle['flex-shrink']"><br>
            flex-basis: <input v-model="itemStyle['flex-basis']"><br>
            flex: <input v-model="itemStyle['flex']"><br>
            align-self: <select v-model="itemStyle['align-self']">
                <option value="auto">auto</option>
                <option value="flex-start">flex-start</option>
                <option value="flex-end">flex-end</option>
                <option value="center">center</option>
                <option value="baseline">baseline</option>
                <option value="stretch">stretch</option>
            </select><br>
            <button @click="addChild">添加子元素</button>
            <button @click="delChild">删除子元素</button> 当前选中：{{selectedItem}}
        </div>
        <div class="box" :style="boxStyle">
            <div class="box-child" v-for="(style, idx) in itemStyleList" :key="idx"
                :style="{...style, 'border-color': selectedItem === idx ? 'red' : 'black'}"
                @click="clickChild(style, idx)"></div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    boxStyle: {
                        height: '200px',
                        width: '100%',
                        'flex-direction': 'row',
                        'flex-wrap': 'nowrap',
                        'flex-flow': 'row nowrap',
                        'justify-content': 'flex-start',
                        'align-items': 'stretch',
                        'align-content': 'stretch'
                    },
                    itemStyleList: [],
                    itemStyle: {
                        height: '100px',
                        width: '100px',
                        order: 0,
                        'flex-grow': 0,
                        'flex-shrink': 1,
                        'flex-basis': 'auto',
                        flex: '0 1 auto',
                        'align-self': 'auto'
                    },
                    selectedItem: -1
                }
            },
            methods: {
                addChild() {
                    if (!(this.selectedItem === 0 && this.itemStyleList.length === 0))
                        this.selectedItem++;
                    this.itemStyleList.push({ ...this.itemStyle });
                },
                clickChild(style, idx) {
                    this.selectedItem = idx;
                    this.itemStyle = style;
                },
                randomItemHeight() {
                    this.itemStyle.height = parseInt(80 + Math.random() * 70) + 'px';
                },
                delChild() {
                    if (this.selectedItem === -1) {
                        return alert('未选中子元素');
                    }

                    if (this.selectedItem >= 0 && this.itemStyleList.length === 0) {
                        return;
                    }

                    this.itemStyleList.splice(this.selectedItem, 1);
                    if (this.selectedItem > 0)
                        this.selectedItem--;
                }
            }
        })
    </script>
</body>

</html>

Flex容器属性详解

flex-direction

该属性决定了项目排列的方向，也就是主轴的方向。

可选值：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。可取的值有三个：

  • nowrap（默认值）：不换行
  • wrap：换行，第一行在上
  • wrap-reverse：换行，第一行在下

flex-wrap

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

justify-content

justify-content属性定义了项目在主轴上的对齐方式。有五个取值：

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

image-20210630033333172

align-items

align-items属性定义项目在交叉轴上如何对齐。有五种取值：

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

image-20210630033815236

align-content

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

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

image-20210630033923829

Flex项目属性详解

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

image-20210630034626568

flex-grow

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

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

image-20210630034725611

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

image-20210630034746270

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

设置了flex-basis之后，子元素在Flex容器中的宽度由该属性的值定义，与元素本身的宽度不再有关系：

image-20210630040028425

当空间不足时，会将所有元素的flex-basis值相加后进行等比缩放：

image-20210630040234895

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

1
2
3
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch，即展开占满整列。

image-20210630040833035