CSS display:flex 弹性布局教程CSS display:flex 弹性布局教程一、引言弹性布局（Fle

CSS `display:flex` 弹性布局教程

一、引言

弹性布局（Flexbox）是 CSS 中一种强大的布局模式，它提供了一种高效且灵活的方式来排列和对齐容器内的元素。使用 display:flex，可以轻松地实现各种复杂的布局结构，无论是简单的水平或垂直排列，还是更高级的自适应布局和元素对齐，都能得到很好的处理。

二、基本概念

容器（Flex Container）
当一个元素被设置为 display:flex 时，它就成为了一个弹性容器。这个容器内的子元素将按照弹性布局的规则进行排列。例如：

.flex-container {
  display: flex;
}

在上述代码中，.flex-container 类所对应的元素就是一个弹性容器。
2. 项目（Flex Item）
弹性容器内的子元素被称为弹性项目。这些项目会在容器内根据设定的规则进行布局调整。

三、主轴与交叉轴

主轴（Main Axis）
在弹性布局中，默认情况下，主轴是水平方向（从左到右）。可以通过 flex-direction 属性来改变主轴的方向。例如：

.flex-container {
  display: flex;
  flex-direction: column; /* 将主轴设置为垂直方向，从上到下 */
}

交叉轴（Cross Axis）
与主轴垂直的轴就是交叉轴。当主轴为水平方向时，交叉轴就是垂直方向，反之亦然。

四、属性介绍

flex-direction
如前面所述，它用于确定主轴的方向。取值可以是 row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。

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

在这个例子中，容器内的项目将从右到左排列。
2. justify-content
该属性用于在主轴上对齐项目。取值包括：

flex-start（默认，项目在主轴起点对齐）
flex-end（项目在主轴终点对齐）
center（项目在主轴中心对齐）
space-between（项目均匀分布在主轴上，两端对齐）
space-around（项目均匀分布在主轴上，每个项目两侧的间隔相等）
space-evenly（项目均匀分布在主轴上，包括两端的间隔都相等）
例如：

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

容器内的项目将在主轴上均匀分布，且每个项目两侧间隔相同。
3. align-items
用于在交叉轴上对齐项目。取值有：

flex-start（在交叉轴起点对齐）
flex-end（在交叉轴终点对齐）
center（在交叉轴中心对齐）
baseline（项目根据基线对齐）
stretch（默认，项目拉伸以填充交叉轴，如果项目未设置高度则会被拉伸）

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

这样容器内的项目将在交叉轴中心对齐。
4. flex-wrap
控制项目是否换行。取值为 nowrap（默认，不换行）、wrap（换行）、wrap-reverse（反向换行）。

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

当容器内项目宽度总和超过容器宽度时，项目将换行排列。
5. align-content
当有多行项目时，用于在交叉轴上对齐这些行。取值类似 justify-content，如 flex-start、flex-end、center、space-between、space-around、space-evenly。如果只有一行项目，则此属性不起作用。

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

多行项目将在交叉轴上均匀分布，两端对齐。

五、项目属性

flex-grow
定义项目的放大比例。默认值为 0，表示如果存在剩余空间，项目也不放大。如果设置为大于 0 的值，例如 1，则项目将根据剩余空间按比例放大。

.flex-item {
  flex-grow: 1;
}

在容器内有多个项目且有剩余空间时，设置了 flex-grow 的项目将占据剩余空间。
2. flex-shrink
与 flex-grow 相反，它定义项目的缩小比例。默认值为 1，表示当空间不足时项目会缩小。如果设置为 0，则项目在空间不足时不会缩小。

.flex-item {
  flex-shrink: 0;
}

这样该项目在容器空间不足时将保持其原始大小，可能导致其他项目过度缩小或溢出。
3. flex-basis
用于设置项目在主轴上的初始大小。可以是长度值（如 200px）或百分比。它优先于 width 和 height 属性（在主轴方向上）。

.flex-item {
  flex-basis: 30%;
}

项目在主轴上的初始大小将被设置为容器宽度的 30%。
4. flex 属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。例如 flex: 1 1 auto 表示项目将按比例放大和缩小，初始大小为 auto。

.flex-item {
  flex: 2 0 300px;
}

这个项目将以 300px 为初始大小，不缩小，且会根据剩余空间按比例放大。

六、案例演示

水平导航栏

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

css

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  color: white;
}
.navbar a {
  text-decoration: none;
  color: inherit;
  padding: 10px;
}

在这个例子中，导航链接在水平方向上均匀分布，形成一个简单的导航栏布局。
2. 垂直居中的卡片

html

<div class="card-container">
  <div class="card">
    <h2>Card Title</h2>
    <p>Some content inside the card.</p>
  </div>
</div>

css

.card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background-color: lightgray;
}
.card {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

这里，卡片在父容器内垂直和水平方向都居中显示。

七、总结

display:flex 弹性布局为 CSS 布局带来了极大的便利和灵活性。通过理解弹性容器和项目的概念，以及各种属性的作用，能够轻松构建出响应式、美观且易于维护的布局结构。无论是简单的页面布局还是复杂的组件设计，弹性布局都值得深入学习和广泛应用。不断实践并尝试不同的属性组合，将能够更好地掌握这一强大的 CSS 布局技术，提升前端开发的效率和质量。