关于 CSS Flexbox 的 15 个技巧和工具-JavaScript中文网-JavaScript教程资源分享门户

什么是 CSS Flexbox？

CSS Flexible Box Layout，简称 Flexbox，是一种用于布局的新的 CSS3 属性。它可以让我们更加方便地实现自适应布局、垂直居中、等分布局等复杂的布局需求。

在进行 Flexbox 布局之前，首先需要对 Flexbox 属性进行了解。

display：控制容器元素的布局方式，flex 表示启用 Flexbox 布局。
flex-direction：控制子元素在容器中的排列方向，包括 row、row-reverse、column、column-reverse 四种方式。
justify-content：控制子元素在主轴上的排列方式，包括 flex-start、flex-end、center、space-between、space-around 五种方式。
align-items：控制子元素在交叉轴上的对齐方式，包括 flex-start、flex-end、center、baseline、stretch 五种方式。
flex-wrap：控制子元素是否换行，wrap 表示允许子元素换行。
align-content：控制多行子元素的对齐方式。

15 个技巧和工具

技巧

实现垂直居中

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

实现自适应布局

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

等分布局

.container {
  display: flex;
  justify-content: space-between;
}

实现换行和溢出

.container {
  display: flex;
  flex-wrap: wrap;
}

实现智能换行

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

结合 Grid 布局

// www.javascriptcn.com code example
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

实现两端对齐

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

实现自适应宽度

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

实现元素间间隔

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item + .item {
  margin-left: 10px;
}

实现左右等分和垂直居中

// www.javascriptcn.com code example
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left,
.right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

多列等分布局

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: calc(33.33% - 10px);
  margin: 5px;
}

实现平均分布

.container {
  display: flex;
  justify-content: space-around;
}

实现固定宽度和自适应宽度

.container {
  display: flex;
  justify-content: space-between;
}
.fixed {
  width: 100px;
}

反转排列方向

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

实现圆形布局

// www.javascriptcn.com code example
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ccc;
}

工具

以上是基本的 Flexbox 的使用技巧，如果能用工具来帮助我们更快地实现这些布局需求，就更加方便了。

以下是一些常用的 Flexbox 工具。

Flexbox Playground

提供了一个 Flexbox 布局实时预览的环境，可以让我们直观地看到 Flexbox 属性的效果。

Flexbox Grid

基于 Flexbox 实现的栅格系统，可以帮助我们快速地实现响应式布局。

Flexy Boxes

提供了一个可视化的 Flexbox 布局生成器，可以快速地生成 Flexbox 布局代码。

如果你想要深入学习 Flexbox，我们推荐以下资料：

以上资料都是非常优秀的 Flexbox 学习资源，如果你能阅读并理解它们，相信你一定可以掌握 Flexbox 的布局技巧。

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

关于 CSS Flexbox 的 15 个技巧和工具

什么是 CSS Flexbox？

15 个技巧和工具

技巧

工具

接着读