Flex弹性布局

flex-direction

取值:row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序,默认row,即横向排列,项目排列顺序为正序1-2-3;row-reverse同为横向排列,但项目顺序为倒序3-2-1。

column 与row相反,为纵向排列,项目顺序为正序1-2-3,column-reverse同为纵向排列,项目顺序为倒序3-2-1。

image-20211111090232270

1
2
3
#header ul{/*ul为空等同于display: flex;flex-direction: row-reverse; 横排倒叙排列*/}
#header ul{display: flex;}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="r nav">
<li class="r">
<i class="iconfont iconwode"></i><span>欢迎您,陈浩 管理员</span>
</li>
<li class="r">
<i class="iconfont iconyuechi"> </i><a href="">修改密码</a>
</li>
<li class="r">
<i class="iconfont iconshouye"></i><a href="">公司官网</a>
</li>
<li class="r">
<i class="iconfont iconbianji"></i><a href="">退出</a>
</li>
</ul>

flex-wrap属性

取值:nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行,nowrap表示不换行;

举个例子:比如容器宽度为300px,容器中有6个宽度为60px的项目,nowrap情况下,项目会强行等分容器宽度从而不换行,那么项目实际宽度也就只有50px了,而非我们自己设置的60px.

image-20211111092656425

wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。

image-20211111092826346

wrap-reverse同样表示换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反

image-20211111093007929

flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。

justify-content属性

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

1
2
3
.box{
justify-content:flex-start | flex-end | center | space-between |space-around;
}
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center:居中
  • space-between:两端对齐,项目之间的间隔都相等
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在交叉轴上如何对齐。

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

完美居中

在下面的例子中,我们会解决一个非常常见的样式问题:完美居中。

解决方案:将 justify-content 和 align-items 属性设置为居中,然后 flex 项目将完美居中:

image-20211111130836767

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
</style>

align-content

该效果只有在flex-wrap换行的情况下生效

image-20211127143348998

image-20211127143337975

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

项目属性

容器属性是加在容器上的,那么项目属性呢,就是写在项目上的,就好比容器属性给ul,项目属性给li差不多一个意思。

order

取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。

image-20211111110626605

1
2
3
4
.box{width: 300px;height: 200px;background-color: wheat;display: flex;flex-wrap: wrap;}
.box div:nth-of-type(1){width: 60px;height: 60px;background: pink;line-height: 60px;text-align: center;order: 2;}
.box div:nth-of-type(2){width: 60px;height: 60px;background: skyblue;line-height: 60px;text-align: center;order: 1;}
.box div:nth-of-type(3){width: 60px;height: 60px;background: orange;line-height: 60px;text-align: center;order: 0;}

flex-grow

取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也会放大。

假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会沾满剩余所有空间。

image-20211111110904125

假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间。

image-20211111111036956

flex-shrink

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style> 
#main {
width: 350px;
height: 100px;
border: 1px solid #000000;
display: flex;
}

#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}

#main div:nth-of-type(2) {
flex-shrink: 3;
}
</style>

image-20211115103935125

使第二个弹性项目相比其余项目收缩三倍。