Css 简明教程

CSS - Flexbox

Flexbox 沿单个维度（可以是水平或垂直对齐）组织容器内的元素。

What is CSS Flexbox?

CSS flexbox 是一种 CSS 布局模型，它提供了一种高效且灵活的方式来排列和分配容器内项目之间的空间。它可以在容器内沿着水平或垂直方向单维度排列元素。

在本文中，我们将简要介绍用于管理沿主轴和交叉轴的元素定位、对齐和间隙的所有属性。

Elements of Flexbox

Flexbox Container: flex 容器定义了 flexbox 的外层元素，其中包含所有子元素。可以通过设置 'display: flex' 或 'display: inline-flex' 来定义 flexbox 容器。
Flexbox items: flexbox 项目是 flexbox 容器的直接子级。这些项目可以根据需要垂直和水平排列在 flexbox 容器内。
Main Axis: 主轴是排列在容器中的项目的首要轴。默认情况下，这是水平轴。
Cross Axis: > 交叉轴是与主轴垂直的轴。默认情况下，这是垂直轴。

以下图表展示了 CSS Flexbox：

Basic Flexbox Layout

Flexbox 通常用于创建响应式 flexbox 布局。

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
         height: 100vh;
      }
      .item {
         background-color: lightcoral;
         padding: 20px;
         margin: 10px;
         border: 3px solid #ccc;
      }
   </style>
</head>

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

Vertical Flexbox Layout

在 CSS 中，我们还可以通过设置 flex-direction: column. 来定义垂直 flexbox

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         height: 100vh;
      }
      .item {
         background-color: lightseagreen;
         padding: 20px;
         margin: 10px;
         border: 3px solid #ccc;
      }
   </style>
</head>

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

Flexbox Justify Content Property

justify-content* 属性通常在 flexbox 容器内使用，以在容器内对齐 flexbox 项目。此属性可能有多个值，若要全面了解 justify-content 属性，请访问我们的 * justify-content property.* 教程

以下记录了一些常用的 justify-content 值。它还有更多关联的值。

// Align Item at center of main axis
justify-content: center;

// Align Item at start of main axis
justify-content: flex-start;

// Align Item at end of main axis
justify-content: flex-end;

// Align Item at left side of main axis
justify-content: left;

// Align Item at right side of main axis
justify-content: right;

Flexbox Align Items Property

CSS 中的 align-items 属性用于沿容器的交叉轴（行布局中的垂直轴，列布局中的水平轴）对齐 flex 项目。此属性有多个关联的值。若要详细了解 align-items 属性，请访问我们的 * CSS Align Items.* 教程

// Align items at start of cross axis of container
align-items: flex-start;

// Align items at end of cross axis of container
align-items: flex-end;

// Align items at center of cross axis of container
align-items: center;

// Align baselines of items (For items with variable sizes)
align-items: baseline;

// Stretch items along cross axis to fill container
align-items: stretch;

Centering a Div using Flexbox

在 CSS 中，使 div 元素（或任何其他元素）居中始终是一个具有挑战性和讨论最多的问题。借助 CSS flexbox，我们可以轻松地在容器内使 div 元素居中。我们必须使用 justify-content 和 align-items 属性使项目居中，以下代码显示了如何执行此操作。

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .flex-container {
         display: flex;
         /* Center horizontally */
         justify-content: center;
         /* Center Vertically */
         align-items: center;
         border: 1px solid #ccc;
         height: 250px;
         background-color: grey;
      }

      .flex-item {
         background-color: lightblue;
         border: 1px solid #333;
         padding: 5px;
         height: 70px;
         width: 70px;
      }
   </style>
</head>

<body>
   <div class="flex-container">
      <div class="flex-item">
         This div is in center of container
      </div>
   </div>
</body>
</html>

Flexbox Wrap Property

具有 wrap 属性的 Flexbox 允许容器内的项目在单行中没有足够空间时移动到下一行。这有助于维护响应式布局。

以下代码展示了如何使用 flexbox 创建响应式布局，该布局使项目居中并换行以适应可用空间。若要全面了解 flex 换行，请访问我们的 * CSS flex-wrap.* 教程

.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
}
.item {
   padding: 20px;
   margin: 10px;
   /* base size 100px */
   flex: 1 1 100px;
}

Flexbox Align Self Property

在 CSS 中，我们有 * align-self* 属性，可用于覆盖容器上设置的 * align-items* 属性。这有助于将各个项目动态放置在容器内的特殊位置。

以下代码显示了如何使用 align-self 属性。此处，我们可以看到 align-items: stretch 不适用于第二个和第三个项目，此属性被项目的 align-self 属性覆盖。

.container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: stretch;
   height: 250px;
}
.item {
   background-color: lightpink;
   padding: 20px;
   margin: 10px;
   border: 1px solid #ccc;
}
.item:nth-child(2) {
   /* Center 2nd item along the cross axis */
   align-self: center;
}
.item:nth-child(3) {
   /* Align 3rd item at the end of the cross axis */
   align-self: flex-end;
}