实例详解 CSS3 Flexbox 布局特性-JavaScript中文网-JavaScript教程资源分享门户

CSS3 引入了 Flexbox 布局，它是一种强大的布局方式，可以轻松地实现复杂布局，而不需要使用传统的盒模型布局。本文将详细介绍 CSS3 Flexbox 布局的特性和用法，并提供相关的示例代码，帮助读者更好地理解和掌握这种布局方式。

什么是 Flexbox 布局

Flexbox 布局是一种基于弹性盒子模型的布局方式，可以将容器中的元素按照一定的规则进行排列和对齐。相比于传统的盒模型布局，Flexbox 布局更加灵活，可以轻松地实现水平和垂直居中、等分布局、自适应布局等复杂布局效果。

Flexbox 布局的基本概念

在了解 Flexbox 布局的特性和用法之前，我们需要先了解一些基本的概念：

容器（Container）：包含 Flexbox 布局的元素，也称为弹性容器（Flex Container）。
项目（Item）：容器中的子元素，也称为弹性项目（Flex Item）。
轴线（Axis）：弹性容器的主轴和交叉轴，由 flex-direction 属性决定。
主轴（Main Axis）：弹性容器的主要方向，由 flex-direction 属性决定。
交叉轴（Cross Axis）：弹性容器的次要方向，与主轴垂直。

Flexbox 布局的特性

Flexbox 布局有以下几个特性：

弹性容器的设置

要使用 Flexbox 布局，首先需要将元素设置为弹性容器，可以通过设置 display 属性为 flex 或 inline-flex 来实现。其中，flex 表示块级元素，inline-flex 表示行内元素。

.container {
  display: flex;
}

主轴方向

Flexbox 布局中的主轴方向由 flex-direction 属性决定，有以下四个取值：

row：默认值，主轴方向为水平方向，起点在左侧，终点在右侧。
row-reverse：主轴方向为水平方向，起点在右侧，终点在左侧。
column：主轴方向为垂直方向，起点在上方，终点在下方。
column-reverse：主轴方向为垂直方向，起点在下方，终点在上方。

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

主轴对齐方式

Flexbox 布局中的主轴对齐方式由 justify-content 属性决定，有以下五个取值：

flex-start：默认值，主轴起点对齐。
flex-end：主轴终点对齐。
center：主轴居中对齐。
space-between：项目等间距分布在主轴上。
space-around：项目两侧留有等距的空白间隔，项目之间的间距是相邻项目间距的一半。

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

交叉轴对齐方式

Flexbox 布局中的交叉轴对齐方式由 align-items 属性决定，有以下五个取值：

stretch：默认值，交叉轴方向上的项目拉伸填满整个容器。
flex-start：交叉轴起点对齐。
flex-end：交叉轴终点对齐。
center：交叉轴居中对齐。
baseline：项目的第一行文字的基线对齐。

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

交叉轴换行

当容器中的项目在交叉轴方向上的总宽度或总高度大于容器的宽度或高度时，Flexbox 布局中的交叉轴换行由 flex-wrap 属性决定，有以下三个取值：

nowrap：默认值，不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

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

项目的排序

Flexbox 布局中的项目的排序由 order 属性决定，数值越小，排列越靠前，默认值为 0。

.item {
  order: 1;
}

项目的对齐方式

Flexbox 布局中的项目的对齐方式由 align-self 属性决定，优先级高于 align-items 属性。

.item {
  align-self: flex-start;
}

项目的伸缩比例

Flexbox 布局中的项目的伸缩比例由 flex 属性决定，有以下三个值：

flex-grow：项目的放大比例，默认值为 0，表示不放大。
flex-shrink：项目的缩小比例，默认值为 1，表示可以缩小。
flex-basis：项目的初始大小，默认值为 auto。

.item {
  flex: 1;
}

Flexbox 布局的实例

下面是一些常见的 Flexbox 布局实例。

等分布局

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

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

水平居中

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

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

垂直居中

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

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

水平和垂直居中

<div class="container">
  <div class="item">1</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

自适应布局

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

// javascriptcn.com 代码示例
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 1;
  height: 100px;
  background-color: #f00;
  margin: 10px;
}

总结

Flexbox 布局是一种强大的布局方式，可以轻松地实现复杂布局，而不需要使用传统的盒模型布局。本文介绍了 Flexbox 布局的特性和用法，并提供了相关的示例代码，希望能够帮助读者更好地理解和掌握这种布局方式。

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