了解Flex布局
概念
Flexbox布局也叫Flex布局,即弹性盒子布局。它的目标是提供一个更有效的布局和对齐方式,并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配子元素之间的间隙。主要是使父元素能够调整子元素的宽度、高度、排列方式,从而更好地适应可用的布局方式。
Flex布局更适合小规模的布局,可以简单、完整、响应式的的实现各种页面布局。但是,设为Flex布局以后,其子元素的float
、clear
和vertical-align
属性将失效。Flex弹性盒模型的优势在于只需声明布局应该具有的行为,而不需要给出具体的实现方式,浏览器负责完成实际布局,当布局涉及到不定宽度,分布对⻬的场景时,就要优先考虑弹性盒布局。
Flex布局是一个完整的模板,它包括了一套完整的属性。其中采用Flex布局的元素,称为Flex容器,简称“容器”。它的所有子元素就是容器成员,称为Flex项目,简称“项目”。
容器默认存在两个轴:水平轴(main axis)和交叉轴(即垂直轴,cross axis),项目默认沿主轴(水平轴)排列。
父元素属性
想要使用flex布局时,首先需要给父元素指定为flex布局
.container {
display: flex;
}
父元素(容器)可以设置以下六个属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
flex-direction
flex-direction:主轴方向,它决定了容器内元素排列方向,它有四个属性值
- row:默认值,沿水平主轴从左到右排列,起点在左沿
- row-reverse:沿水平主轴从右到左排列,起点在右沿
- column:沿垂直主轴从上到下排列,起点在上沿
- column-reverse:沿垂直主轴从下到上排列,起点在下沿
flex-wrap
flex-wrap:容器内元素是否可以换行,它有三个属性值
- nowrap:默认值,不换行。当主轴的长度是固定并且空间不足时,项目尺寸会随之进行调整,但不会换行。
- wrap:换行,第一行在上面。
- wrap-reverse:换行,第一行在下面。
flex-flow
flex-flow
是flex-direction
属性和flex-wrap
属性的简写,用处不大,最好还是分开来写。
justify-content
justify-content:元素在主轴的对齐方式,它有五个属性值
这里以水平方向为主轴进行举例,即flex-direction: row
。
- flex-start:默认值,元素在主轴上左对齐(上对齐)
- flex-end:元素在主轴上右对齐(下对齐)
- center:元素在主轴上居中对齐
- space-between:元素在主轴上两端对齐,元素之间间隔相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items
align-items:元素在交叉轴上的对齐方式,它有五个属性值
这里以水平方向为主轴进行举例,即flex-direction: row
。
- stretch:默认值,如果元素未设置高度或设为auto,将占满整个容器的高度。
- flex-start:交叉轴的起点对齐(上面或左边)
- flex-end:交叉轴的终点对齐(下面或右边)
- center:交叉轴的中点对齐。
- baseline:以元素的第一行文字的基数对齐。
align-content
align-content:多根轴线对齐方式。如果元素只有一根轴线,该属性不起作用。它有六个属性值:
那这个轴线数怎么确定呢?实际上主要是由flex-wrap
属性决定的,当flex-wrap
设置为 nowrap
时,容器仅存在一根轴线,因为项目不会换行,就不会产生多条轴线。当 flex-wrap
设置为 wrap
时,容器可能会出现多条轴线,这时就需要去设置多条轴线之间的对齐方式。
这里以水平方向为主轴时举例,即:flex-direction: row; flex-wrap: wrap;
- stretch:默认值,轴线占满整个交叉轴。(如果未设置高度,则会根据容器高度自动计算)
- flex-start:从交叉轴开始位置填充。
- flex-end:从交叉轴结束位置填充。
- center:与交叉轴中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-arround:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
子元素属性
共有六个属性:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
用来定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-basis
定义了在分配多余空间之前,项目占据的主轴空间,浏览器会根据这个属性来计算主轴是否有多余空间。默认值为auto,即项目的本来大小。
.item {
flex-basis: <length> | auto;
}
当主轴设置为水平时,并且设置了 flex-basis
,项目设置的宽度会失效。flex-basis
需要跟 flex-grow
和 flex-shrink
配合使用才能生效。有两种特殊的值:
- 当
flex-basis
值为0%时,项目尺寸会被认为是0,因此项目尺寸设置多少都不起作用。 - 当
flex-basis
值为 auto 时,则根据尺寸的设定值来设置大小。
flex-grow
定义项目的放大比例,默认为0,即如果存在剩余空间时也不放大。
当容器中所有的项目都设置了flex-basis
属性时,如果仍有剩余的空间,设置的flex-grow
属性才能生效。
- 如果所有项目的
flex-grow
属性都设置为1,那么它们会均分剩余的空间。 - 如果其中一个项目的
flex-grow
属性值设置为2,其他均为1,那么该项目占据的剩余空间就是其他项目的两倍。
flex-shrink
定义项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。不能设置为负值。
- 如果所有项目的
flex-shrink
属性都为1,当空间不足时,都将等比例缩小。 - 如果一个项目的
flex-shrink
属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex
flex-grow
,flex-shrink
和flex-basis
的简写,后两个属性可选。默认值为 flex: 0 1 auto
。对于flex的取值,有以下几种特殊的情况:
flex: 0 1 auto
:即在有剩余空间时,只放大不缩小flex: none
:即有剩余空间时,不放大也不缩小,最终尺寸通常表现为最大内容宽度。flex: 0
:即当有剩余空间时,项目宽度为其内容的宽度,最终尺寸表现为最小内容宽度。flex: auto
:即元素尺寸可以弹性增大,也可以弹性变小,具有十足的弹性,但在尺寸不足时会优先最大化内容尺寸。flex: 1
:即元素尺寸可以弹性增大,也可以弹性变小,具有十足的弹性,但是在尺寸不足时会优先最小化内容尺寸。
align-self
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items
属性。默认值为auto
,表示继承父元素的align-items
属性,如果没有父元素,则等同于stretch
。
这个属性和align-items
属性的效果是一样的,只不过这个属性只对单个项目生效,而align-items
是对容器中所有项目生效。
共有 0 条评论