CSS 3 Flexbox 弹性布局教程-JavaScript中文网-JavaScript教程资源分享门户

Flexbox 是一种新的布局方式，可以让我们更方便地创建响应式布局，并且可以减少我们对浮动和定位的依赖。本文将详细介绍 CSS 3 Flexbox 弹性布局的概念、属性和用法，以及示例代码。

概念

Flexbox 是一种 CSS 模块，用于创建灵活的布局。它的主要思想是让容器和其内部的元素都能够自适应宽度和高度，以便适应不同的屏幕大小和设备类型。Flexbox 弹性布局有两个核心概念：容器和项目。容器是包含项目的父元素，而项目则是容器内的子元素。

容器属性

Flexbox 容器有以下属性：

display

这个属性用于指定一个元素作为 Flexbox 容器。它的值可以是 flex 或 inline-flex。

.container {
  display: flex;
}

flex-direction

这个属性用于指定 Flexbox 容器内项目的排列方向。它的值可以是 row（默认值，水平方向），row-reverse（水平方向反转），column（垂直方向）和 column-reverse（垂直方向反转）。

.container {
  flex-direction: row;
}

flex-wrap

这个属性用于指定 Flexbox 容器内项目的换行方式。它的值可以是 nowrap（默认值，不换行），wrap（换行）和 wrap-reverse（反向换行）。

.container {
  flex-wrap: wrap;
}

justify-content

这个属性用于指定 Flexbox 容器内项目在主轴上的对齐方式。它的值可以是 flex-start（默认值，靠左对齐），flex-end（靠右对齐），center（居中对齐），space-between（两端对齐，项目之间的间隔相等），space-around（每个项目两侧的间隔相等）和 space-evenly（每个项目两侧和之间的间隔相等）。

.container {
  justify-content: center;
}

align-items

这个属性用于指定 Flexbox 容器内项目在交叉轴上的对齐方式。它的值可以是 stretch（默认值，拉伸对齐），flex-start（靠上对齐），flex-end（靠下对齐），center（居中对齐）和 baseline（基线对齐）。

.container {
  align-items: center;
}

align-content

这个属性用于指定多行项目在交叉轴上的对齐方式。它的值可以是 stretch（默认值，拉伸对齐），flex-start（靠上对齐），flex-end（靠下对齐），center（居中对齐），space-between（两端对齐，项目之间的间隔相等）和 space-around（每个项目两侧的间隔相等）。

.container {
  align-content: center;
}

项目属性

Flexbox 项目有以下属性：

flex

这个属性用于指定项目的放大比例、缩小比例和基准值。它的值可以是一个数字，也可以是 none（不放大也不缩小）。

.item {
  flex: 1;
}

flex-grow

这个属性用于指定项目的放大比例。它的值可以是一个数字。

.item {
  flex-grow: 1;
}

flex-shrink

这个属性用于指定项目的缩小比例。它的值可以是一个数字。

.item {
  flex-shrink: 1;
}

flex-basis

这个属性用于指定项目的基准值。它的值可以是一个长度值或百分比。

.item {
  flex-basis: 100px;
}

order

这个属性用于指定项目的排列顺序。它的值可以是一个整数。

.item {
  order: 1;
}

align-self

这个属性用于指定项目在交叉轴上的对齐方式。它的值可以是 auto（默认值，继承父元素的 align-items 属性），stretch（拉伸对齐），flex-start（靠上对齐），flex-end（靠下对齐），center（居中对齐）和 baseline（基线对齐）。

.item {
  align-self: center;
}

示例代码

下面是一个简单的 Flexbox 布局示例代码：

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

// www.javascriptcn.com code example
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  text-align: center;
}

这个布局将会创建一个水平方向的 Flexbox 容器，其中有三个项目，它们将会在容器内均匀分布，并且在交叉轴上居中对齐。每个项目都将会拥有相同的宽度，因为它们的 flex 属性都设置为 1。

学习和指导意义

CSS 3 Flexbox 弹性布局是一种非常实用的布局方式，可以让我们更轻松地创建响应式布局，减少对浮动和定位的依赖。掌握 Flexbox 布局的基本概念、属性和用法，可以让我们更加高效地开发网页，提升用户体验。同时，Flexbox 布局也有一定的复杂度，需要我们不断实践和学习，才能更加熟练地运用它来实现我们的设计目标。

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

CSS 3 Flexbox 弹性布局教程

概念