学习用 CSS Flexbox 布局，不要太难-JavaScript中文网-JavaScript教程资源分享门户

CSS Flexbox 是一种现代的布局方式，它可以轻松地解决传统布局方式中存在的许多问题，并且具有更好的响应式特性。本文将介绍 Flexbox 的基本概念、用法和示例。

什么是 Flexbox?

Flexbox 是使用 CSS3 引入的一种布局方法，它可以通过 flex container 和 flex items 等两个概念来实现布局。Flexbox 给我们带来了更加简便而且语义化的布局方式，可以解决传统布局方式中的很多问题。

Flexbox 的基本概念

在 Flexbox 中，有两个重要的概念：flex container 和 flex items。

Flex container

Flex container 是包含 flex items 的父级元素，它可以设置一些属性来控制容器内子元素的布局方式。在样式中使用 display: flex 或 display: inline-flex 可以将元素定义为 flex container。

Flex items

Flex items 是容器内的子元素。它们可以按照设定的规则在 container 内排列，通常包含在一个 flex container 中。

除此之外，Flexbox 还包含许多其他重要的概念和属性，包括主轴（main axis）、交叉轴（cross axis）、flex-direction、justify-content 和 align-items，下面将详细介绍。

Flexbox 的主轴和交叉轴

当我们设置一个元素为 flex container 时，该元素就会有一个主轴和一个交叉轴。

主轴：默认为水平方向，也可以通过设置 flex-direction 来更改
交叉轴：默认为垂直方向，与主轴垂直

主轴和交叉轴都非常重要，因为它们会影响布局方式，它们的方向取决于 flex-direction 属性的值。

Flex-direction 属性

Flex-direction 属性控制 flex container 内的 flex items 布局方向，它有以下四个选项：

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

Justify-content 和 align-items 属性

在 Flexbox 中，justify-content 属性和 align-items 属性是控制 flex items 在主轴和交叉轴上的对齐方式的两个重要属性。

justify-content 属性有以下五个取值：

flex-start：默认值，表示 flex items 位于 container 的开头。
flex-end：表示 flex items 位于 container 的结尾。
center：表示 flex items 居中对齐。
space-between：表示 flex items 平均分布在 container 中，且相邻两个 flex item 之间的间距相等。
space-around：表示 flex items 平均分布在 container 中，且每个 flex item 周围的间距相等。

align-items 属性有以下五个取值：

stretch：默认值，表示 flex items 沿着交叉轴方向拉伸，填满 container 的高度或宽度。
flex-start：表示将 flex items 存储在 container 的交叉轴起点处。
flex-end：将 flex items 存储在 container 的交叉轴末尾处。
center：表示 flex items 在交叉轴上居中对齐。
baseline：表示 flex items 在交叉轴上以其基线对齐。

使用 Flexbox 布局的示例

下面是一个简单的 Flexbox 示例：

<html>
   <head>
      <style>
         .container {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           height: 100px;
           background-color: khaki;
         }
         .item {
            width: 100px;
            height: 50px;
            background-color: tomato;
            color: white;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="item">1</div>
         <div class="item">2</div>
         <div class="item">3</div>
      </div>
   </body>
</html>

这个示例中，我们将容器设置为 flex container，设置了 flex-direction 为 row，这样子元素就会水平排列。然后我们设置了 justify-content 为 space-between，这样子元素就会平均分布在 container 中，且相邻两个 flex item 之间的间距相等。最后我们设置了 align-items 为 center，让子元素居中对齐。

总结

CSS Flexbox 是一个强大的布局方法，它可以解决传统布局方式中存在的许多问题，并且具有更加响应式的特性。通过熟练掌握 flex container 和 flex items 概念以及主轴、交叉轴、flex-direction、justify-content 和 align-items 属性，我们可以轻松地创建出灵活的布局。

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

学习用 CSS Flexbox 布局，不要太难