CSS Flexbox：一个全解读-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是 CSS 的布局模块，可以帮助我们更加方便地实现各种复杂的布局需求，尤其是在响应式布局中更加方便。在本文中，我们将深入探讨 Flexbox 在前端开发中的使用。

理解 Flexbox 概念

Flexbox 是 Flexible Box Layout 的简称，即弹性盒子布局。它是一种新型的布局模式，可以使我们更加方便地实现响应式布局、自适应布局、垂直居中、等分布局等各种复杂的布局需求，比如以下的需求：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这个简单的代码可以让一个容器居中对齐其内部的子元素，不论是在水平方向还是垂直方向上。以上就是 Flexbox 的优越性所在。

Flexbox 属性详解

display

Flexbox 布局是建立在一个容器之上的，所以我们必须先定义一个容器。容器的定义方式是通过设置其 display 属性来实现的：

.container {
  display: flex;
}

以上代码就将一个 container 元素变成了一个 Flexbox 容器。

flex-direction

在 Flexbox 中，这个属性是用来定义主轴方向的。主轴是指 Flexbox 中的一条轴线，其方向沿着排列方向方向而定。默认的主轴方向是从左到右。通过设置 flex-direction 属性，我们可以改变主轴的方向，取值包括 row，row-reverse，column 和 column-reverse 四种。

.container {
  display: flex;
  flex-direction: row-reverse;
}

以上代码将容器的主轴方向更改为从右到左。

justify-content

这个属性是用来定义 Flexbox 容器内部的子元素在布局中的排列方式。它可以让子元素在水平方向上排列，取值有 flex-start，flex-end，center，space-between 和 space-around。

.container {
  display: flex;
  justify-content: center;
}

以上代码将容器内部的子元素居中排列。

align-items

这个属性是用来定义 Flexbox 容器内部的子元素在垂直方向上的对齐方式，取值包括 flex-start，flex-end，center，stretch 和 baseline。

.container {
  display: flex;
  align-items: center;
}

以上代码将容器内部的子元素在垂直方向上居中对齐。

flex-grow

这个属性是用来定义子元素在容器中的占比。取值为一个数值，代表占比的权重，数值越大，占比越大。如果有多个元素，且它们的 flex-grow 属性值不同，那么总占比就将按照 flex-grow 的值分配。

.item {
  flex-grow: 1;
}

以上代码中的元素将平分容器的剩余空间。

flex-shrink

这个属性与 flex-grow 属性类似，用于定义子元素的收缩能力。如果容器过小，子元素本身的大小将受到压缩。默认情况下，flex-shrink 的值为 1，即所有子元素都可以被等比例地压缩。如果容器没有溢出，则 flex-shrink 不起作用。

.item {
  flex-shrink: 0;
}

以上代码中的元素将不会被压缩。

flex-basis

这个属性是用来设置子元素的初始大小的，往往与 width 或 height 属性一并使用。如果同时设置了 flex-basis 和 width 或 height 属性，那么 width 或 height 属性将会被覆盖，以 flex-basis 的值为准。

.item {
  flex-basis: 100px;
}

以上代码将子元素的初始大小设置为 100 像素。

flex

这个属性是用来同时设置 flex-grow，flex-shrink 和 flex-basis 的简写属性。

.item {
  flex: 1 0 100px;
}

以上代码的效果与 flex-grow: 1; flex-shrink: 0; flex-basis: 100px; 是一样的。

align-self

这个属性是用来覆盖 align-items 的属性值的。如果覆盖了一个 align-items 的属性值，那么这个子元素将只在有此属性值的容器中居中，其他兄弟元素将不受影响。

.item {
  align-self: center;
}

以上代码将子元素居中。

注意事项

Flexbox 在 IE11 及以下版本中不支持。
CSS Grid Layout 也是一种新型的布局方式，它与 Flexbox 搭配使用可以实现更加灵活的布局方案。

结语

Flexbox 可以帮助我们更加方便地实现各种复杂的布局需求，代码量也变得更加简洁。这个新型的布局方案还有很多其他的属性和用法，有需要的读者可以深入学习。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7c664a941bf7134decf35

CSS Flexbox：一个全解读