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-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 具有更高的优先级.

• flex

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

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

  1. 单值语法(一个)
  • 一个无单位数(number): 它会被当作flex:<number> 1 0; flex-shrink的值被假定为1，然后flex-basis 的值被假定为 0。
  • 一个有效的宽度(width)值: 它会被当作 flex-basis 的值。
  • 关键字 none (1 1 auto) ，auto (0 0 auto).
  2. 双值语法(两个)

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

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

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

• align-self

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

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

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

附参考：

• flex 布局
• 阮一峰 Flex 布局教程：语法篇