这些flex属性你知道吗?

前言

为了避免每次使用flex布局都得查一下阮老师的博客,决定自己写一篇博文,让自己记忆更加深刻,以后再次忘记也方便回顾自己当初的理解,这里不会讲解所有flex布局的属性,只是选取一部分可能被忽视,但却很实用的几个属性。

轴的概念

一般我们讨论flex布局的时候,总是会讲到交叉轴和主轴的概念,有时候交叉轴是水平的,有时候又是竖直的,真是傻傻分不清,为了搞清楚这个最基本的概念,我们先要理解flex-direction,这个属性表示容器中项目的排列方向,也就是决定主轴的方向,所以:

  1. flex-direction:row(默认)时主轴为水平轴,交叉轴为竖直轴
  2. 反之当flex-direction:column时主轴为竖直轴,交叉轴为水平轴

    容器属性

    基本属性

  • flex-direction: row(默认) | row-reverse | column | column-reverse;
  • flex-wrap: nowrap(默认) | wrap | wrap-reverse;
  • flex-flow: || ;
  • justify-content: flex-start(默认) | flex-end | center | space-between | space-around;
  • align-items: flex-start(默认) | flex-end | center | baseline | stretch;

align-items: baseline

这个我们尤其要注意,虽然用的不算多,但是一定要知道,这个是什么意思呢,baseline指的是,对其对齐点是项目内部第一行文字的基线,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box{
display: flex;
width: 500px;
height: 300px;
align-items: baseline;
}
.smbox{
height: 100px;
width: 100px;
}
<div class="box">
<div class="smbox">
<h1>1</h1>
</div>
<div class="smbox">
<p>2</p>
</div>
<div class="smbox">
<h2>3</h2>
</div>
</div>

这里我们看到项目内第一行文字对齐,效果图:

image

align-content

上面列出的都是几个基本属性,这个属性迷惑了我挺久的,文档解释说:

定义了多根轴线的对齐方式,排列与交叉轴作为参考,如果项目只有一根轴线,该属性不起作用。

  1. 排列与交叉轴作为参考
  2. 项目只有一根轴线,该属性不起作用

那么这是分别是什么意思呢,我们来举个例子:

  • 项目只有一根轴(主轴):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.box{
display: flex;
width: 500px;
height: 300px;
border: 1px solid red;
align-content: center;
}
.smbox{
height: 100px;
width: 100px;
background: sandybrown;
border: 1px solid green;
}
<div class="box">
<div class="smbox">1</div>
<div class="smbox">2</div>
<div class="smbox">3</div>
</div>

这里我们看到当容器中,只有主轴的时候,align-content就会失效,如图:
image

  • 添加项目,让容器有主轴线和交叉(竖直)轴线:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.box{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 500px;
height: 300px;
border: 1px solid red;
align-content: center;
}
.smbox{
height: 100px;
width: 100px;
background: sandybrown;
border: 1px solid green;
}
<div class="box">
<div class="smbox">1</div>
<div class="smbox">2</div>
<div class="smbox">3</div>
<div class="smbox">4</div>
<div class="smbox">5</div>
<div class="smbox">6</div>
</div>

align-content: flex-end生效,这个时候我们来解释第二条:“排列与交叉轴作为参考”,我们设置的flex-end实际上是以交叉轴为参考对象,如图:

image

这里,我们理解了align-content两个关键点:起效的条件以及参考轴线,下面是阮大大的图,这里盗用以下:

image

属性值:

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。
  • stretch(默认值):轴线占满整个交叉轴(当项目有自身的宽高值不起效)

项目的属性

或许很多时候,我们用flex布局就是为了省时间弄个水平垂直居中,我个人非常不建议这么做,第一是flex目前兼容性还有待提升,第二是仅仅是为了实现垂直居中来用flex就像是杀鸡用牛刀,尽管如此,对于很多项目属性,我们都是了解的不多,但是这在移动端开发时候,是个很有效的利器。

order

这个属性一般用于项目的排布顺序,数值越小,排列越靠前,默认为0:

1
2
3
4
5
6
7
8
<div class="box">
<div class="smbox">1</div>
<div class="smbox">2</div>
<div class="smbox">3</div>
<div style="order: -2" class="smbox">4</div>
<div class="smbox">5</div>
<div style="order: -1" class="smbox">6</div>
</div>

image

flex-grow

项目的放大比例,我们先用一个例子来表示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.box{
display: flex;
flex-wrap: wrap;
width: 500px;
height: 300px;
border: 1px solid red;
}
.smbox{
height: 100px;
width: 100px;
background: sandybrown;
border: 1px solid green;
}
<div class="box">
<div style="flex-grow: 1" class="smbox">1</div>
<div style="flex-grow: 3" class="smbox">2</div>
<div class="smbox">3</div>
<div style="flex-grow: 2" class="smbox">4</div>
<div class="smbox">5</div>
<div style="order: -1" class="smbox">6</div>
</div>

效果图:

image

这里我们看到,放大比例是在同一行里,剩下的空间,具有flex-grow属性的项目均摊剩下的空间。

flex-shrink

定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

1
2
3
4
5
6
7
8
9
10
<div class="box">
<div class="smbox">1</div>
<div class="smbox">2</div>
<div class="smbox">3</div>
<div style="flex-shrink: 0" class="smbox">4</div>
<div class="smbox">5</div>
<div class="smbox">6</div>
<div class="smbox">7</div>
<div class="smbox">8</div>
</div>

如果设置为0,那么就是原始宽度,如图:

image

flex

这个属性其实就是个简写,它表示flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

align-self

这个就比较另类了,align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,我们可以理解为独树一帜,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.box{
display: flex;
align-items: center;
width: 480px;
height: 300px;
border: 1px solid red;
}
.smbox{
height: 100px;
width: 100px;
box-sizing: border-box;
background: sandybrown;
border: 1px solid green;
}
<div class="box">
<div class="smbox">1</div>
<div class="smbox">2</div>
<div style="align-self: flex-start" class="smbox">3</div>
<div class="smbox">4</div>
</div>

效果图:

image

傻傻分不清:align-items、align-content、align-self

  • align-items:是表示项目在交叉轴上如何对齐,他的作用对象是整个容器布局。
  • align-content:定义了多根轴线的对齐方式,他的作用对象也是整个容器布局。
  • align-self:单个项目有与其他项目不一样的对齐方式,覆盖align-items。

总结

这篇博客的目的在于巩固自己对flex布局的理解,虽然一些属性可能有的不多,但是在一些特殊的情况下,是很有必要使用的,就免得使用各种绝对相对float定位来加大代码量,也不好维护,响应式也是flex最为优先的。

It is not easy to meet each other in such a big world. :)