flex布局小结

forever_Mamba
823 阅读5分钟

前言

随着时代的发展，人们越来越多的重视前端的用户体验，不论是在 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-direction 和 flex-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-shrink 和 flex-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布局常用的属性，如有错误，请纠结。

附参考：

avatar
文章
阅读
粉丝