Flex布局是什么?

Flex是Flexible Box的缩写，意为”弹性布局”，是一种用于按行或按列布局元素的一维布局方法，可以为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用Flex布局的容器叫做Flex容器他所有的子元素被称为Flex项目



flex默认有两个轴，水平的叫做主轴main axis，垂直的是交叉轴cross axis

单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

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
<style>
    .one{background: aqua;}
    .two{background: aquamarine;}
    .three{background: chartreuse;}
    .four{background: darkorange}
    .five{background: olivedrab;}
    .six{background: hotpink}
    .seven{background: navajowhite}
    .eight{background: darkorange}
    .nine{background: indianred}
    .item{
        border: 3px solid red;
        padding: 20px;
        margin: 20px;
    }
    .wrapper{
        display: flex;
        padding: 20px;
        border: 5px solid;
    }
</style>
<div class="wrapper">
    <div class="item one">flex item</div>
    <div class="item two">flex item</div>
    <div class="item three">flex item</div>
    <div class="item four">flex item</div>
    <div class="item five">flex item</div>
    <div class="item six">flex item</div>
    <div class="item seven">flex item</div>
    <div class="item eight">flex item</div>
    <div class="item nine">flex item</div>
</div>

容器的属性

flex-wrap

关键字描述图述
nowrap不换行
wrap换行
wrap-reverse换行，且交叉轴方向反转

修改上边的样式

1
2
3
4
5
6
7
8
9
10
11
.item{
    border: 3px solid red;
    padding: 20px;
}

.wrapper{
    display: flex;
    padding: 20px;
    border: 5px solid;
    flex-wrap: wrap;
}

justify-content

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

关键字描述图述
flex-start左对齐
flex-end右对齐
center居中
space-between两端对齐，项目之间的间隔都相等。
space-around两端对齐，每个项目两侧的间隔相等。

flex-direction

flex-direction决定主轴的方向

关键字描述图述
row水平从左向右
row-reverse水平从右向左
column垂直从上往下
column-reverse垂直从下往上

修改上边的样式

1
2
3
4
5
6
7
8
.wrapper{
    display: flex;
    padding: 20px;
    border: 5px solid;
    height: 300px;
    flex-wrap: wrap;
}
.one{background: aqua;font-size: 30px}

align-items

align-items定义项目在交叉轴上的对齐方式 假定交叉轴方向为从上往下

关键字描述图述
flex-start从上往下
flex-end从下往上
center居中
baseline项目的第一行文字的基线对齐。
stretch没有设置高度活着设为auto，则占满整个容器

flex-flow

flex-flow为flex-direction和flex-wrap的简写形式

1
2
3
.wrapper{
    flex-flow: flex-direction flex-wrap;
}

项目的属性

order

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

1
2
3
4
5
6
7
8
9
.item{
    order: 3;
}
.one{
    order: 2;
}
.two{
    order: 1;
}


flex-grow

flex-grow定义项目占据剩余空间的能力
上边的代码就表示将剩余空间分为3份，one占其中的两份two只占其中的一份
未设置前：

1
2
3
4
5
6
.one{
    flex-grow: 2;
}
.two{
    flex-grow: 1;
}

设置后：

flex-shrink

flex-shrink属性定义了元素的收缩系数,他的计算方式就相对而言有点复杂了。
例如容器的宽度为500px
有三个项目宽度分别为：200px、300px、400px
他们的溢出空间就为：500 - (200 + 300 + 400) = -400;
三个子元素的 flex-shrink 的值分别为 2，4，6。
计算总压缩权重 2 * 200 + 4 * 300 + 6 * 400 = 4000
每个元素宽度为：

  • 200 - ( 2 * 200 / 4000 ) * 400 = 160
  • 300 - ( 4 * 300 / 4000 ) * 400 = 180
  • 400 - ( 6 * 400 / 4000 ) * 400 = 160
    计算总压缩权重sum 所有的元素宽度乘他的flex-shrink后相加；
    计算剩余空间residue 父元素宽度 - 所有元素的宽度
    就能得出每个元素宽度的计算公式：width - ( flex-shrink * width / sum ) * residue

flex-basis

flex-basis定义项目占据主轴空间的大小，因为flex布局默认的主轴都是横向的所以他默认就和width一样，他的优先级比width高 如果flex-direction的值修改为column那么他就和height一样了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrapper{
    display: flex;
    width: 500px;
    background: black;
}
.item{
    height: 100px;
    box-sizing: border-box;
}
.one{
    flex-shrink: 1;
    width: 200px;
    flex-basis: 50px;
}
.two{
    flex-shrink: 2;
    width: 300px;
}
.three{
    flex-shrink: 3;
    width: 400px;
}

1
2
3
4
5
6
.wrapper{
    display: flex;
    width: 500px;
    background: black;
    flex-direction: column;
}

flex

flex-grow、flex-shrink、flex-basis的简写形式

1
flex: flex-grow | flex-shrink | flex-basis

默认值为：flex: 0 1 auto;
可以设置为：

  • auto代表flex: 1 1 auto;
  • none代表flex: 0 0 auto

align-self

设置单个项目覆盖align-item的一个属性，默认为auto，代表着继承父元素其他属性值和align-item是一样的

参考