CSS Flexbox的具体用法详解

简介

Flexbox 是一种 CSS 布局方式，它提供了一种更加灵活的方式来布局网页元素。

Flexbox 通过弹性盒子的方式，让元素具有伸缩性和对齐性，使得网页可以更加快速地适应不同的屏幕尺寸和设备。

CSS Flexbox 布局模型

Flexbox 布局模型是基于弹性容器 (flex container) 和弹性子元素 (flex item) 的概念。弹性容器是直接应用于某个父节点的 CSS 属性，而弹性子元素则是弹性容器的直接后代元素。

弹性容器的属性

以下是常用的弹性容器的属性：

• display: 定义弹性容器的布局类型。将其设置为 flex 可以启用Flexbox布局模型。
• flex-direction: 定义主轴的方向。常用的取值包括 row (默认值，从左至右)、row-reverse (从右至左)、column (从上至下) 和 column-reverse (从下至上)。
• justify-content: 定义在主轴上如何对齐弹性子元素。常用的取值包括 flex-start (靠近主轴起点)、flex-end (靠近主轴终点)、center (居中)、space-between (等距分布) 和 space-around (每个子元素两侧等距)。
• align-items: 定义在交叉轴上如何对齐弹性子元素。常用的取值包括 stretch (默认值，延展子元素以适应容器高度)、flex-start (靠近交叉轴起点)、flex-end (靠近交叉轴终点)、center (居中) 和 baseline (基线对齐)。
• flex-wrap: 定义如何换行。常用的取值包括 nowrap (默认值，不换行)、wrap (换行) 和 wrap-reverse (反向换行)。
• align-content: 定义在多行上如何对齐弹性子元素。常用的取值与 justify-content 相同。

弹性子元素的属性

以下是常用的弹性子元素的属性：

• order: 定义子元素在弹性容器内的顺序。默认为 0。可设置为负值。
• flex-grow: 定义子元素的伸展能力。默认为 0，表示不伸展。
• flex-shrink: 定义子元素的收缩能力。默认为 1，表示可收缩。
• flex-basis: 定义子元素的初始尺寸。默认为 auto。
• flex: 简写属性，分别设置子元素的 flex-grow、flex-shrink 和 flex-basis。
• align-self: 使用在单个元素上，定义该元素在交叉轴上如何对齐。常用的取值与 align-items 相同。

CSS Flexbox 的使用示例

示例 1

在这个示例中，将创建一个简单的两列布局，其中左侧栏固定宽度 200px，右侧自适应宽度。

HTML 代码：

<div class="container">
  <div class="sidebar">Sidebar content</div>
  <div class="content">Main content</div>
</div>

CSS 代码：

.container {
  display: flex;
}

.sidebar {
  width: 200px;
  background-color: #ddd;
}

.content {
  flex: 1;
  background-color: #eee;
}

该示例中的 .container 元素被设置为 display: flex，使其成为一个弹性容器。

.sidebar 元素被设置为固定宽度 200px，而 .content 元素是一个弹性子元素，使用 flex: 1 将其设置为自动伸展到剩余可用空间的宽度。

此样式将产生一个带有左侧固定栏和适应内容的右侧主要内容的布局。

示例 2

在此示例中，我们将创建一个包含多个项目的 “表格” 布局。

HTML 代码：

<div class="table">
  <div class="row">
    <div class="cell">Heading 1</div>
    <div class="cell">Heading 2</div>
    <div class="cell">Heading 3</div>
  </div>
  <div class="row">
    <div class="cell">Item 1-1</div>
    <div class="cell">Item 1-2</div>
    <div class="cell">Item 1-3</div>
  </div>
  <div class="row">
    <div class="cell">Item 2-1</div>
    <div class="cell">Item 2-2</div>
    <div class="cell">Item 2-3</div>
  </div>
</div>

CSS 代码：

.table {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
}

.cell {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
}

该示例将创建一个 “表格” 元素，其中行和列都是使用 Flexbox 布局创建的。

.table 元素被设置为 display: flex 和 flex-direction: column，使其成为一个垂直容器，而 .row 元素也是一个弹性容器，使用 display: flex 将其设置为稍后包含多个单元格。

对于 .cell 元素，使用 flex: 1 使其自动拉伸以填充其单元格中的可用空间。每个单元格都带有一些内边距和边框，以使其看起来像是独立的表格单元格。

此样式将产生一个大大简化的表格布局，其中每个行和列都是由单个容器管理的。

总结

以上是CSS Flexbox的主要用法和属性。使用Flexbox 可以更加轻松地创建适应不同尺寸的布局，它比传统的 float 和 position 方法更加灵活和快速。