flex(flexible box)布局是迄今为止最灵活的盒模型,它可以灵活方便地实现各种各样的布局
一、基础知识
1、flex布局分为块元素flex布局
和行元素flex布局
,可以使用display: flex
来实现块级flex布局,使用display: inline-flex
实现行级flex布局
2、设为flex布局后,子元素的float
、clear
、vertical-align
将失效
3、采用flex布局的元素,称之为 flex容器;容器内的项目自动成为容器成员,称为 flex项目。容器的核心概念主要是主轴
、侧轴
、主轴起点,主轴终点
、侧轴起点,侧轴终点
,项目默认沿着主轴排列,对于一个主轴方向为从左到右
的flex容器而言,如下:
二、弹性容器的属性
弹性容器有6个属性:
flex-direction
、flex-wrap
、flex-flow
、justify-content
、align-items
、align-content
1、flex-direction
这个属性设置主轴的方向,有四个值:row(从左到右,默认)、row-reverse(从右到左)、column(从上到下)、column-reverse(从下到上),如:
2、flex-wrap
默认情况下,弹性项目排列在一条主轴上,而flex-wrap
设置当主轴排列不下的时候,如何处理
nowrap
默认值,表示不换行,当主轴排列不下的时候,就自动调节各个弹性项目的大小,使得可以在一条主轴上排列wrap
排列不下的时候,就换行,且第一行在上方wrap-reverse
排列不下的时候,就换行,且第一行在下方
3、flex-flow
flex-flow
是 flex-direction
和 flex-wrap
的简写形式,它的默认值为row nowrap
4、justify-content
定义项目在主轴
上如何对齐,图解如下:
5、align-items
align-items
属性概念上与justify-content
类似,只不过它的参考轴是侧轴
,它具有如下的属性值:
- flex-start 向侧轴起点对齐
- flex-end 向侧轴终点对齐
- center 向侧轴中点对齐
- stretch 默认值,当项目没有设置高度或者高度为auto的时候,拉伸占满整个容器高度
6、align-content
只有当有多根轴线的时候,align-content
定义对齐方式,其属性值有:flex-start
、flex-end
、center
、stretch
、space-between
、space-around
、baseline
三、弹性项目的属性
弹性容器的属性,是针对所有弹性项目全体而言的,而弹性项目的属性
,则可以细致地控制每一个弹性项目
1、order
order属性定义项目在视觉上的排列属性,默认情况下,弹性项目的排列是以源码中定义的顺序显示的。但是如果定义了order
属性,则可以脱离源码中出现顺序的限制,灵活排布。它的语法为order: 数值
,数值越小,排列越前面,默认为0
2、flex-grow
1)当弹性容器的区域 > 弹性项目的区域总和
的时候,弹性容器会有剩余空间,而flex-grow
的作用,就是为每个弹性项目指定将如何分配这个剩余空间,这是一个比例系数,默认为0(表示有剩余空间也不分配)
2)假设当前弹性容器剩余100px的空间,而有A、B、C三个弹性项目,他们的flex-grow
分别设为2、2、1,那么A、B、C将分别分得2/5、2/5、1/5,即40px、40px、20px
3、flex-shrink
当弹性容器区域不足以容纳弹性项目的时候,可以由flow-shrink
属性指定如何缩小弹性项目。语法格式为:flow-shrink: <unsigned int>
,默认情况下,属性值为1,表示空间不足的时候都将等比例缩小。如果设为0,那么空间不足时也不缩小
4、flex-basis
当我们期望有剩余区域时,在分配的时候,有某个区域能够总保持固定的大小的时候,就可以使用flex-basis
属性。设置这个属性后,分配空间前,会先让设置该属性的项目获得相应的主轴大小,再用剩余的空间去分配,其语法格式为:
flex-basis: <length> | auto; /* 默认值为0 */
5、flex
这个属性是flex-grow
、flex-shrink
、flex-basis
的复合,默认值为0 1 auto
,即默认情况下,有剩余空间的时候保持不变,空间不足的时候等比例缩小,该属性还有两个特殊的属性值:
auto
,相当于(1 1 auto),表示有剩余空间时候等比例放大,空间不足等比例缩小none
,相当于(0 0 auto),表示不会弹性变化项目空间大小
6、align-self
这个属性可以覆盖弹性容器中align-items
对当前项目的限制,也就是说可以允许当前项目有自己独特的对齐方式。默认值为auto
,表示服从默认的align-items
设置,它的取值有:auto
、flex-start
、flex-end
、center
、stretch
、baseline