Flexbox 技术全解析：30 个实用的使用技巧汇总-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种强大的 CSS 布局模式，它可以将容器中的元素进行灵活地排列和对齐。它的出现极大地简化了前端开发中的布局问题。本文将为您详细介绍 Flexbox 的使用技巧和常见问题解决方案。

1. 弹性容器和弹性项目

在使用 Flexbox 之前，需要了解两个重要的概念：弹性容器和弹性项目。

弹性容器是一个父元素，用来包含弹性项目。通过设置弹性容器的属性，可以对其内部的弹性项目进行排列和对齐。

弹性项目是弹性容器内的子元素，可以设置它们的排列和对齐方式。默认情况下，弹性项目会水平排列。

2. 弹性容器的属性

以下是弹性容器的主要属性：

display: flex：将元素设置为弹性容器。
flex-direction：设置弹性项目的排列方向。有 row、row-reverse、column 和 column-reverse 四个值可选。
flex-wrap：设置弹性项目是否换行。有 nowrap、wrap 和 wrap-reverse 三个值可选。
justify-content：设置弹性项目在主轴上的对齐方式。有 flex-start、flex-end、center、space-between、space-around 和 space-evenly 六个值可选。
align-items：设置弹性项目在交叉轴上的对齐方式。有 flex-start、flex-end、center、baseline 和 stretch 五个值可选。
align-content：设置多行弹性项目在交叉轴上的对齐方式。有 flex-start、flex-end、center、space-between、space-around 和 stretch 六个值可选。

3. 弹性项目的属性

以下是弹性项目的主要属性：

flex-grow：设置弹性项目的放大比例。默认值为 0，即不放大。
flex-shrink：设置弹性项目的缩小比例。默认值为 1，即可以缩小。
flex-basis：设置弹性项目的基准大小。默认值为 auto，即使用元素本身的大小。
flex：设置弹性项目的三个属性值，分别是 flex-grow、flex-shrink 和 flex-basis。
order：设置弹性项目的排列顺序。默认值为 0，表示按照 HTML 文档流的顺序排列。

4. 实用技巧汇总

4.1. 快速设置弹性容器

可以使用以下语句快速将一个元素设置为弹性容器：

.container {
  display: flex;
}

4.2. 水平居中

可以使用以下语句将弹性项目在主轴上居中：

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

4.3. 垂直居中

可以使用以下语句将弹性项目在交叉轴上居中：

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

4.4. 水平和垂直居中

可以使用以下语句将弹性项目在主轴和交叉轴上都居中：

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

4.5. 等分排列

可以使用以下语句将弹性项目等分排列：

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

4.6. 自适应宽度

可以使用以下语句让弹性项目自适应宽度：

.container {
  display: flex;
}

.item {
  flex: 1;
}

4.7. 固定宽度

可以使用以下语句让弹性项目固定宽度：

.container {
  display: flex;
}

.item {
  flex: 0 0 200px;
}

4.8. 宽度优先排列

可以使用以下语句让部分弹性项目宽度优先排列：

// javascriptcn.com 代码示例
.container {
  display: flex;
}

.item {
  flex: 1;
}

.item:first-child {
  flex: 0 0 auto;
}

4.9. 换行排列

可以使用以下语句让弹性项目换行排列：

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

4.10. 等高排列

可以使用以下语句让弹性项目等高排列：

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

4.11. 均分高度

可以使用以下语句让弹性项目均分高度：

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

.item {
  flex: 1;
}

4.12. 固定高度

可以使用以下语句让弹性项目固定高度：

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

.item {
  height: 200px;
}

4.13. 自适应高度

可以使用以下语句让弹性项目自适应高度：

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

.item {
  flex: 1;
}

4.14. 固定宽高

可以使用以下语句让弹性项目固定宽高：

.container {
  display: flex;
}

.item {
  width: 200px;
  height: 200px;
}

4.15. 自适应宽高

可以使用以下语句让弹性项目自适应宽高：

.container {
  display: flex;
}

.item {
  flex: 1;
}

4.16. 水平翻转

可以使用以下语句将弹性项目水平翻转：

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

4.17. 垂直翻转

可以使用以下语句将弹性项目垂直翻转：

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

4.18. 水平对齐

可以使用以下语句将弹性项目水平对齐：

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

.item {
  margin: 0 auto;
}

4.19. 垂直对齐

可以使用以下语句将弹性项目垂直对齐：

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

.item {
  align-self: center;
}

4.20. 交叉轴对齐

可以使用以下语句将弹性项目在交叉轴上对齐：

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

4.21. 多行排列

可以使用以下语句让弹性项目多行排列：

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

4.22. 多行等分排列

可以使用以下语句让弹性项目多行等分排列：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.item {
  flex-basis: calc(33.33% - 20px);
}

4.23. 嵌套弹性容器

可以使用以下语句嵌套弹性容器：

.container {
  display: flex;
}

.sub-container {
  display: flex;
}

4.24. 弹性容器和非弹性容器混合

可以使用以下语句将弹性容器和非弹性容器混合：

.container {
  display: flex;
}

.non-flex-item {
  width: 100px;
}

4.25. 弹性项目排序

可以使用以下语句对弹性项目进行排序：

// javascriptcn.com 代码示例
.container {
  display: flex;
}

.item:nth-child(1) {
  order: 3;
}

.item:nth-child(2) {
  order: 2;
}

.item:nth-child(3) {
  order: 1;
}

4.26. 水平滚动

可以使用以下语句实现弹性项目的水平滚动：

// javascriptcn.com 代码示例
.container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  flex: 0 0 auto;
}

4.27. 垂直滚动

可以使用以下语句实现弹性项目的垂直滚动：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.item {
  flex: 0 0 auto;
}

4.28. 伸缩布局

可以使用以下语句实现伸缩布局：

.container {
  display: flex;
}

.item {
  flex: 1;
}

4.29. 悬挂布局

可以使用以下语句实现悬挂布局：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  flex: 0 0 auto;
}

.content {
  flex: 1;
  overflow-y: auto;
}

4.30. 表格布局

可以使用以下语句实现表格布局：

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
}

.row {
  display: flex;
  flex-basis: 100%;
}

.cell {
  flex: 1;
}

5. 总结

Flexbox 技术是一种强大的 CSS 布局模式，它可以灵活地排列和对齐弹性项目。本文介绍了 Flexbox 的主要属性和常见问题解决方案，希望能对您的前端开发工作有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656720f6d2f5e1655d0067c1