导航
导航

flex布局整理

flex 布局是 CSS3 中提出的一个能够简便、完整、响应式地实现各种页面布局的解决方案,之前在学习 CSS 的时候也有过对flex布局的接触,但是考虑到兼容性问题,并没有广泛使用 flex 布局,来到公司实习,发现公司不用考虑兼容性问题,在线同事们会“建议”客户使用 chrome 或者 firefox。简直美滋滋,赶紧花了一个下午复习了下 flex 布局,然后凭着记忆写了下基本语法以及作用,趁热整理出来,算是以后查询有个地方,配合 阮大的教程(1)阮大的教程(2) 食用更佳。

container

  1. display: flex | inline-flex
  2. flex-direction: row | row-reverse | column | column-reverse
  3. flex-warp: nowarp | warp | warp-reverse
    • warp-reverse — 换行后第一行在下面,自下往上换行
  4. justify-content: flex-start | flex-end | center | space-between | space-around
    • space-between — 两端对齐,即边缘与项目紧贴,然后项目间间隙相等
    • space-around — 每个项目两侧间隔相等,所以中间项目间隔是边缘项目与边缘间隔的两倍
  5. align-items: stretch | flex-start | flex-end | center | baseline |
    • stretch — 默认值,占满整个容器的高度
    • baseline — 项目第一行文字的基线对齐(即文字底部)
  6. align-content: stretch | flex-start | flex-end | center | space-between | space-around
    • 用于多轴线对齐方式,在flex-warp设置为warp项目换行后就会产生多轴线
    • stretch — 多条轴线会在交叉轴上平均分布
    • flex-start — 轴线全部在交叉轴起点对齐
    • 其他属性以此类推

item

  1. order: [integer]
    • 取值为整数,规定了在容器中的排序顺序,值越小的排序越靠前,初始值为0,可以取负值
  2. flex-basis: auto | [length or height]
    • 定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余的空间。
    • 当主轴为水平轴时,如果设置了这个属性,那么项目的宽度就会失效,主轴为交叉轴时亦然。
  3. flex-basis需要搭配flex-grow和flex-shrink使用
    • 当flex-basis为0%时,则把该项目设置为0尺寸
    • 当取值为auto时,则根据宽高进行设置,则该值不会纳入剩余空间
  4. flex-grow: [number]
    • 该值定义了项目的放大比例,当所有的项目按照flex-basis的值进行排列后如果还有剩余空间,那么设置了该值的项目就会进行相应的大小调整。
    • 初始值为0,即就算存在剩余空间,也不进行放大;如果所有项目的值设为1,则所有项目等分剩余空间;如果某个项目此时值为2,则该项目所占的剩余空间是其他项目的2倍
  5. flex-shrink: [number]
    • 默认值为1,即如果空间不足,该项目将缩小;如果该值为0,则不缩小。
  6. flex: flex-grow flex-shrink flex-basis
    • flex的默认值是上述三个值的组合,有两个特殊的取值:auto(1 1 auto) none(0 0 auto)
      默认取值 1 1 0%(有任何值传入时)

同时有许多默认组合(优先赋值flex-grow):

  • 当只有一个非负数字时,该值是flex-grow,剩下为1 0%
  • 当只有一个长度(或高度)或百分比时,该值是flex-basis,剩下为 1 1

等等等

同时需要注意在同一时间,flex-shrink 和 flex-grow 只有一个能起作用,这其中的道理细想起来也很浅显:空间足够时,flex-grow 就有发挥的余地,而空间不足时,flex-shrink 就能起作用。当然,flex-wrap 的值为 wrap | wrap-reverse 时,表明可以换行,既然可以换行,一般情况下空间就总是足够的,flex-shrink 当然就不会起作用

align-self: auto | stretch | flex-start | flex-end | center | baseline

align-self允许项目设置自己的对齐方式,默认为auto,为继承父亲的align-items。

该属性所起的作用与align-items相同