最全的 CSS Flexbox 教程-JavaScript中文网-JavaScript教程资源分享门户

前言

CSS Flexbox 是一种强大的布局方式，它让我们可以更加灵活地设计页面布局，特别是对于移动端的开发更加方便。本篇文章将介绍 Flexbox 的基本概念、语法和用法，帮助你快速学习并掌握它的实际应用。

基本概念

Flexbox 是一种基于弹性盒模型的布局方式，容器和项目之间都有几个基本概念。其中容器被称为“Flex Container”，项目被称为“Flex Item”。

Flex Container

Flex Container 是一个含有 Flex 属性的父级容器，它的主要作用是管理其内部的 Flex Item。以下是 Flex Container 的一些属性：

display: flex 或 display: inline-flex：定义 FlexContainer 的显示方式。前者将其设置为块级元素，后者则设置为行内元素。
flex-direction：用来设定 FlexContainer 内部 Flex Item 排列的方向。默认为横向排列。可以设置四个值来分别表示横向、竖向、横向反转和竖向反转，并且会影响到 Flex Item 的排列。
flex-wrap：定义 Flex Item 的换行方式。默认为不换行。可以设置三个值来分别表示不换行、单行换行、多行换行。该属性仅在 Flex Item 的排列方向为横向时生效。
justify-content：定义 Flex Item 的水平对齐方式。常用于控制 Flex Item 在 Flex Container 内的横向排列。
align-items：定义 Flex Item 的垂直对齐方式。常用于控制 Flex Item 在 Flex Container 内的竖向排列。
align-content：在多行 Flex Item 的情况下，用于定义如何分别对齐不同的行。该属性仅在 flex-wrap: wrap 时生效。

Flex Item

Flex Item 是 Flex Container 的子级元素，以下是 Flex Item 的一些属性：

flex-grow：定义 Flex Item 的放大比例。默认为 0，即不占用剩余空间。如果设置为 1，表示放大比例为 1，占用剩余空间的比例与其他 Flex Item 相同。如果设置为 2，则占用剩余空间的比例为 2:1，以此类推。
flex-shrink：定义 Flex Item 的缩小比例。默认为 1，即占用超出容器大小的空间比例为 1。如果设置为 0，则该 Flex Item 不会缩小，即使有空间不足的情况出现。如果设置为 2，表示该 Flex Item 缩小比例为 2，比其他 Flex Item 多缩小一倍的空间。
flex-basis：定义 Flex Item 的基准宽度。默认为 auto，表示采用该元素的原始宽度。可以设置为像素，百分比等值。
align-self：定义单个 Flex Item 在 Flex Container 中的对齐方式。值域同 Flex Container 的 align-items，常用于调整某个具体项的对齐方式。

语法和实例分析

语法

Flexbox 的语法非常简单，只需要将 display: flex 或 display: inline-flex 属性添加到容器上即可。以下是简单的示例：

HTML

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  flex: 1;
}

实例分析

1. 水平居中和垂直居中

以下示例将 Flex Item 居中对齐：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

2. 横向流布局

以下示例将 Flex Item 横向排列：

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

3. 竖向流布局

以下示例将 Flex Item 竖向排列：

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

4. 左右两端对齐

以下示例将左右两端对齐的方式应用于 Flex Item：

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

5. 指定宽度比例

以下示例将不同元素的宽度按照比例排列：

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

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

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

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

6. 换行

以下示例将换行应用于 Flex Item，并居中对齐：

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

.item {
  flex: 1 0 200px;
}

总结

Flexbox 是一种强大的布局方式，它的灵活性和简洁语法能够帮助我们快速地设计并实现页面的布局。本篇文章介绍了 Flexbox 的基本概念、语法和实际应用，并提供了示例代码进行参考。希望本文能够对你学习和掌握 Flexbox 有所帮助。

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