HomeBlogTagsAbout
Published on

使用 flex 弹性布局

概念

首先我们需要知道弹性布局的概念，通常我们喊它 flexbox，即弹性盒，它是一种一维的布局模型。它会给 flexbox 里的子元素之间提供强大的空间分布和对齐能力。

它为什么会被说成是一种一维布局，这是因为一个 flexbox 一次只能处理一个维度上的元素布局，也就是说要么是一行要么是一列。

核心

我们在使用 flex 布局时，最核心的就是需要理解它的两条轴线：

  • 主轴
  • 交叉轴

它们之间的关系：主轴由 flex-direction 定义，而另一个垂直于它的轴就是交叉轴。

主轴

主轴是由 flex-direction 属性来定义的，由四个值可选：

  • row：默认值
  • row-reverse
  • column
  • column-reverse

前两个值是沿着水平（inline）方向排列的；

而后两个值则是沿着垂直（block）方向排列的；

交叉轴

交叉轴是相对于主轴而言的，这里就不多说了。我们需要知道的是弹性盒的特性就是沿着主轴或者交叉轴对齐子元素的。

设置弹性布局

要设置弹性布局，需要知道以下四点：

  • 给元素设置 display: flex 或者 display: inline-flex 就会使元素成为一个 flex 容器
  • 而给父级元素设置 display: flex 之后，子元素的 float、clear、vertical-align 就会失效
  • 我们把 flex 容器中所有的子元素称为容器成员——flex 项目
  • 设置了弹性布局之后，就会产生两条轴线：主轴和交叉轴

刚设置完 flex 的容器拥有以下的默认行为：

  • 因为默认的主轴是 row ，所以元素排列为一行
  • 因为 flex-grow 属性默认为 0，所以主轴方法上不会被拉伸
  • 而 flex-shrink 属性默认为 1，所以在主轴上是可以被缩小的
  • 控制交叉轴对齐的 align-items 属性默认值是 stretch，所以会把子元素都默认被拉伸到最高元素的高度。
  • 每个子元素的宽度在默认情况下就是自身的宽度，这取决于 flex-basis 的默认属性值 auto
  • flex 容器在默认情况下也是不换行的，如果子元素们的总长度超出了父元素，那么就会造成溢出。这是因为 flex-wrap 的值默认情况下为 nowrap

简写属性

flex-flow

flex-flow 是属性 flex-direction 和 flex-wrap 的简写，当我们需要同时设置两个属性的时候就可以用到它。

element {
    /* 第一个值代表 flex-direction；第二个值代表 flex-wrap */
    flex-flow: row nowrap;
}

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。

那要理解这几个属性之前，我们需要知道可用空间的概念，因为这几个属性的作用其实就是改变了 flex 容器里的可用空间。

假设在 1 个 500px 的容器中，我们有 3 个 100px 宽的元素，那么这 3 个元素需要占 300px 的宽，剩下 200px 的可用空间。在默认情况下，flexbox 的行为会把这 200px 的空间留在最后一个元素的后面。

flex-grow

我们在文章前面说了，设置了弹性盒之后，默认是不会进行元素延展的，这是因为 flex-grow 的默认值为 0。

那由此可见，这个属性的主要作用就是做元素延展的。它的完整概念及作用如下：

flex-grow 若被赋值为一个正整数，flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

我们平时如果要实现容器内的元素等分排列，就可以使用 flex-grow: 1 来实现。

flex-shrink

有了延伸，那么就会有收缩，fllex-shrink 的作用就是如此，它的默认值为 1，也就是说设置弹性盒之后，容器里的元素是允许被收缩的。

flex-basis

这个属性是伸缩容器内部元素的基数，它定义了弹性盒的空间大小。在 flex 容器里除了元素所占的空间以外的空间就是可用空间。

flex-basis 属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。

如果没有给元素设定尺寸，flex-basis 的值采用元素内容的尺寸。这就解释了：我们给只要给 Flex 元素的父元素声明 display: flex ，所有子元素就会排成一行，且自动分配小大以充分展示元素的内容。

其他

还有很多属性可以玩儿出更多花样，就不一一赘述了，这里再说下常用的主轴和交叉轴上的对齐属性就可以了。

主轴对齐方式 justify-content

justify-content 属性用来使元素在主轴方向上对齐，主轴方向是通过 flex-direction 设置的方向。初始值是flex-start。

我们要实现垂直水平都居中时就需要用到该属性，将其值设置为 center，也可以设置分散排列，这在做一些排列布局时很有用——space-around 和 space-between。

其他的一些可用值，请自行查阅文档。

交叉轴对齐方式 align-items

align-items 属性时用来设置元素在交叉轴方向上对齐的属性，它的初始值是 stretch，这也是为什么 flex 元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满 flex 容器 —— 最高的元素定义了容器的高度。

同样的，我们在设置垂直水平都居中时，也需要用到该属性的 center 值。

其他的一些可用值，请自行查阅文档。