愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

flex弹性布局学习总结

flex(flexible box)布局是迄今为止最灵活的盒模型,它可以灵活方便地实现各种各样的布局

一、基础知识

1、flex布局分为块元素flex布局行元素flex布局,可以使用display: flex来实现块级flex布局,使用display: inline-flex实现行级flex布局
2、设为flex布局后,子元素的floatclearvertical-align将失效
3、采用flex布局的元素,称之为 flex容器;容器内的项目自动成为容器成员,称为 flex项目。容器的核心概念主要是主轴侧轴主轴起点,主轴终点侧轴起点,侧轴终点,项目默认沿着主轴排列,对于一个主轴方向为从左到右的flex容器而言,如下:



二、弹性容器的属性

弹性容器有6个属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

1、flex-direction

这个属性设置主轴的方向,有四个值:row(从左到右,默认)、row-reverse(从右到左)、column(从上到下)、column-reverse(从下到上),如:

2、flex-wrap

默认情况下,弹性项目排列在一条主轴上,而flex-wrap设置当主轴排列不下的时候,如何处理

  • nowrap 默认值,表示不换行,当主轴排列不下的时候,就自动调节各个弹性项目的大小,使得可以在一条主轴上排列
  • wrap 排列不下的时候,就换行,且第一行在上方
  • wrap-reverse 排列不下的时候,就换行,且第一行在下方

3、flex-flow

flex-flowflex-directionflex-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-startflex-endcenterstretchspace-betweenspace-aroundbaseline


三、弹性项目的属性

弹性容器的属性,是针对所有弹性项目全体而言的,而弹性项目的属性,则可以细致地控制每一个弹性项目

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-growflex-shrinkflex-basis的复合,默认值为0 1 auto,即默认情况下,有剩余空间的时候保持不变,空间不足的时候等比例缩小,该属性还有两个特殊的属性值:

  • auto,相当于(1 1 auto),表示有剩余空间时候等比例放大,空间不足等比例缩小
  • none,相当于(0 0 auto),表示不会弹性变化项目空间大小

6、align-self

这个属性可以覆盖弹性容器中align-items对当前项目的限制,也就是说可以允许当前项目有自己独特的对齐方式。默认值为auto,表示服从默认的align-items设置,它的取值有:autoflex-startflex-endcenterstretchbaseline