阅读 251

flex布局小结

前言

随着时代的发展,人们越来越多的重视前端的用户体验,不论是在 web 端,还是移动端(小程序、H5、RN...),特别是在移动端,因为设备屏幕的不同,就需要前端开发去适配不同的屏幕大小,对布局的就有要求了。

在现在的开发过程中,我们经常会用到 flex 布局,从而去适配不同的屏幕大小。

今天,从的使用经验中去谈一下 flex。

什么是flex布局?

flex 布局 又叫 弹性布局,我们可以想象在一个盒子容器中有多个子元素,当我们去改变”盒子“的大小的时候,弹性布局为我们提供了一种子元素在盒子中的布局规则

flex布局的属性

父容器的属性

  • display: flex

    设置容器使用弹性布局

  • flex-direction

    设置主轴的排列方式 (子元素的排列方向)

    属性值描述
    row主轴横向,子元素从左到右排列
    column主轴纵向,子元素自上而下排列
    row-reverse主轴横向反转,子元素从右到左排列(与row相反)
    column-reverse主轴纵向反转,子元素自下而上排列(与column相反)
  • justify-content

    设置子元素在主轴方向的对齐规则

    属性值描述
    flex-start默认值,子元素从主轴的开始方向到结束方向依次排列,与主轴的开始方向对齐(左对齐)
    flex-end子元素从主轴的结束方向到开始方向依次排列(与flex-start相反),与主轴的结束方向对齐(右对齐)
    center子元素以主轴的中间方向居中对齐
    space-around两端对齐,子元素两侧的间隔相等,子元素之间的间隔是头尾子元素与边框的间隔的两倍
    space-between两端对齐,每个子元素的间隔相等
  • align-items

    设置子元素在交叉轴方向(和主轴垂直交叉的辅助轴)的对齐规则

    属性值描述
    flex-start交叉轴的起点对齐
    flex-end交叉轴的终点对齐
    center交叉轴的中间对齐
    baseline子元素的第一行文字的基线对齐
    stretch默认值,子元素未设置高度或者高度为auto,将占满整个容器的高度
  • align-content

    设置纵轴在内容项之间和周围分配空间(多跟轴线),子元素只有一行时无效生效

    属性值描述
    flex-start从起始点开始放置flex元素
    flex-end从终止点开始放置flex元素
    center将项目放置在中点 与交叉轴的中间对齐
    space-between均匀分布项目,第一项与起始点齐平,最后一项与终止点齐平
    space-around均匀分布项目,项目在两端有一半大小的空间
    space-evenly均匀分布项目,项目周围有相等的空间
    stretch默认值,均匀分布项目,拉伸‘自动’-大小的项目以充满容器
  • flex-wrap

    指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向

    属性值描述
    nowrap默认值 不换行。flex 的子元素被摆放到到一行,这可能导致溢出 flex 容器
    wrap换行,第一行在上方。
    wrap-reverse换行,第一行在下方。和wrap相反
  • flex-flow

    flex-flow 属性是 flex-directionflex-wrap 的简写,默认值是 row nowrap

    flex-flow: <flex-direction> || <flex-wrap>;
    复制代码

子元素的属性

  • flex-grow

    设置元素的放大比例(flex增长系数),负值无效,默认为 0。

  • flex-shrink

    设置元素的收缩规则,flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,负值无效,默认为 1。

  • flex-basis

    设置元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的尺寸。默认为auto,即是元素的本来大小

    当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

    如果元素设置了 maxWidth 或者 maxHeight 的时候,此时元素 height = maxHeight,width = maxWidth

  • flex

    设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto

    它可以使用一个两个三个值来指定 flex属性

    1. 单值语法(一个)
    • 一个无单位数(number): 它会被当作flex:<number> 1 0; flex-shrink的值被假定为1,然后flex-basis 的值被假定为 0

      常见用法: flex: 1,相当于flex: 1 1 0

    • 一个有效的宽度(width)值: 它会被当作 flex-basis 的值。

    • 关键字 none (1 1 auto) auto (0 0 auto), initial (0, 1, auto).

    1. 双值语法(两个)

    第一个值必须为一个无单位数,并且它会被当作 flex-grow 的值

    第二个值有以下两种格式:

    • 一个无单位数: 它会被当作 flex-shrink 的值。
    • 一个有效的宽度值: 它会被当作 flex-basis 的值。
  • align-self

    设置当前元素的对齐方式,覆盖已有的 align-items 的值。

    属性值描述
    auto默认值,设置为父元素的 align-items 值,如果没有父元素,则等同于stretch
    flex-start交叉轴的起点对齐
    flex-end交叉轴的终点对齐
    center交叉轴的中间对齐
    baseline子元素的第一行文字的基线对齐
    stretch子元素未设置高度或者高度为auto,将占满整个容器的高度

以上就是常用的flex布局常用的属性,如有错误,请纠结。

附参考:

文章分类
前端
文章标签