flex是flexibl box的缩写,意为“弹性盒”/“伸缩盒”。
flex布局可以简便、完整、响应式地实现各种页面布局,任何一个容器都可以指定为 Flex 布局。
Flex布局属性
#### 容器属性
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
- align-content
#### 元素属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
使用方法:对于某个元素只要声明了display: flex;
那么这个元素就成为了弹性容器,具有flex弹性布局的特性。采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item)/ Flex 元素,简称"项目" / "元素"。
注意点:
- 每个弹性容器都有两根轴:主轴和交叉轴,两轴之间成90度关系。注意:水平的不一定就是主轴。
- 每根轴都有起点和终点,这对于元素的对齐非常重要。
- 弹性容器中的所有子元素称为<弹性元素>,弹性元素永远沿主轴排列。
- 弹性元素也可以通过
display:flex
设置为另一个弹性容器,形成嵌套关系。因此一个元素既可以是弹性容器也可以是弹性元素。
弹性容器的两根轴非常重要,所有属性都是作用于轴的。
flex布局大部分的属性都是作用于主轴的,在交叉轴上很多时候只能被动地变化。
**容器属性
^设置主轴排列方式^
flex-direction属性
用于控制项目排列方向与顺序:
flex-direction:row(默认) | column | row-reverse | column-reverse
^沿主轴的排列方式^
flex-wrap属性
可使得主轴上的元素不换行、换行、反向换行:
flex-warp: nowrap(默认) | wrap | wrap-reverse
用于控制项目是否换行,nowrap表示不换行;
举个例子:比如容器宽度为300px,容器中有6个宽度为60px的元素,nowrap情况下,项目会强行等分容器宽度从而不换行,那么项目实际宽度也就只有50px了,而非我们自己设置的60px。
flex-warp:nowarp;(默认)
wrap表示换行,即项目不会等分容器宽度,而是根据自身宽度进行排列,如果超出父容器宽度则自然换行。
flex-warp:warp;
wrap-reverse同样表示换行,需要注意的是第一排会紧贴容器底部,而不是我们想象的项目6紧贴容器顶部,效果与wrap相反。
flex-warp:warp-reverse;
flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合,默认属性为row nowrap,即横向排列,且不换行,如果需要控制项目排列与换行,推荐使用此属性,而非单独写两个。
^设置主轴对齐方式^
justify-content属性
justify-content:flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
用于控制项目在主轴上的对齐方式,默认flex-start即左对齐,center 为居中,对应的flex-end为右
space-between为左右两端对齐,即左右两侧项目都紧贴容器,且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍,比较特别的布局,不常用。
space-evenly为项目之间间距与项目与容器间距相等,相当于除去项目宽度,平均分配了剩余宽度作为项目左右margin。
^设置交叉轴排列方式^
align-items属性
align-items:flex-start | flex-end | center | baseline | stretch(默认)
用于控制项目在交叉轴排列方式,默认stretch即如果项目没设置高度,或高度为auto,则占满整个容器,下面第一张图的项目没设置高度,其余均为50px。
注意点:
常理来说justify-content与align-items默认分别处理项目主轴,交叉轴的对齐方式,但如果我们修改了flex-direction为column,它们处理的轴向会交换,也就是justify-content处理交叉轴,align-items处理主轴。
- 想要使一个子元素垂直水平居中,只需要设置其父元素:
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
^设置多行对其方式^
align-content属性
!!!前提条件:开启 flex-warp:warp换行
align-content:flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);
用于控制多行项目的对齐方式,如果项目只有一行则不会起作用,需设置flex-wrap: wrap;默认stretch,即在项目没设置高度,或高度为auto情况下让项目填满整个容器,与align-items类似。注意,如下演示的12个项目均没有设置高度。
space-between为上下两侧项目紧贴容器。
space-around与justify-content保持一致,即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理,项目之间间距与项目到容器之间间距相等
** 项目属性/元素属性
容器属性是加在父容器上的,那么项目属性呢,就是写在项目/弹性元素上的,就好比容器属性给ul,项目属性给li差不多一个意思。
order属性
取值:默认0,用于决定项目排列顺序,数值越小,项目排列越靠前。
flex-grow属性
取值:默认0,用于决定项目在有剩余空间的情况下是否放大,默认不放大;注意,即便设置了固定宽度,也不会放大。
假设默认三个项目中前两个个项目都是0,最后一个是1,最后的项目会占满剩余所有空间。
假设只有第一个项目默认为0,后面两个项目flex-grow均为1,那么后两个项目平分剩余空间。
假设第一个项目默认为0,第二个项目为flex-grow:2,最后一个项目为1,则第二个项目在放大时所占空间是最后项目的两倍。
flex-shrink属性
取值:默认1,用于决定项目在空间不足时是否缩小,默认项目都是1,即空间不足时大家一起等比缩小;注意,即便设置了固定宽度,也会缩小。
但如果某个项目flex-shrink设置为0,则即便空间不够,自身也不缩小。
flex-basis属性
取值:默认auto,用于设置项目宽度,默认auto时,项目会保持默认宽度,或者以width为自身的宽度,但如果设置了flex-basis,权重会比width属性高,因此会覆盖widtn属性。
上图中先设置了flex-basis属性,后设置了width属性,但宽度依旧以flex-basis属性为准。
flex属性
取值:默认0 1 auto,flex属性是flex-grow,flex-shrink与flex-basis三个属性的简写,用于定义项目放大,缩小与宽度。
该属性有两个快捷键值,分别是auto(1 1 auto)等分放大缩小,与none(0 0 auto)不放大不缩小。
还有最常用的flex:1 === flex: 1 1 0px
^ 设置弹性元素自身对齐方式 ^
align-self属性
取值:auto(默认) | flex-start | flex-end | center | baseline | stretch,表示继承父容器的align-items属性。如果没父元素,则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式,各值的表现与父容器的align-items属性完全一致。