Css 简明教程

CSS - Flexbox

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

Flexbox organizes elements within a container along a single dimension, which can be either horizontally or vertically aligned.

What is CSS Flexbox?

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

CSS flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container.

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

In this article we will cover all the properties for managing the positioning, alignment, and gaps between elements along both the main and cross axes briefly.

Table of Contents

Elements of Flexbox

  1. Flexbox Container: The flex container defines the outer element of flexbox, where all the child elements are present. A flexbox container can be defined by setting 'display: flex' or 'display: inline-flex'.

  2. Flexbox items: Flexbox items are direct children of flexbox container. This items can be arranged vertically and horizontally inside flexbox container based on need.

  3. Main Axis: Main axis is primary axis along which items arranged in a container. By default this is horizontal axis.

  4. Cross Axis: >Cross axis is perpendicular axis to primary axis. By default this is vertical axis.

以下图表展示了 CSS Flexbox:

Following Diagram will demonstrate the CSS Flexbox:

flexbox

Basic Flexbox Layout

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

Flexbox is commonly used to create responsive flexbox layout.

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

In CSS, we can also define vertical flexbox by setting flex-direction: column.

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.* 教程

The justify-content property is commonly used inside flexbox containers to align flexbox items inside container. There are several values possible for this property, for a complete reference of justify-content property visit our tutorial on justify-content property.

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

Some of the commonly used values of justify-content is noted down below. There are lot more values associated with it.

// 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.* 教程

The align-items property in CSS is used to align flex items across cross axis (vertical axis in a row layout, horizontal axis in a column layout) of the container. There are several values associated with this property. To learn more about align-items property visit our tutorial on 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-contentalign-items 属性使项目居中,以下代码显示了如何执行此操作。

Centering a div element( or any other elements ) is always a challenging and most discussed problem in CSS. With the help of CSS flexbox we can easily center a div element inside a container. We have to use justify-content and align-items properties to center items, following code shows how this is done.

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 with wrap property allows items within a container to move to next line when there is no enough space in a single line. This helps to maintain a responsive layout.

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

Following code demonstrates how to use flexbox to create a responsive layout that centers its items and wraps them to fit within the available space. For a complete guidance on flex wrap, visit our tutorial on 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* 属性。这有助于将各个项目动态放置在容器内的特殊位置。

In CSS, we have align-self property which can be used to override align-items property set on container. This helps to dynamically place each items at special locations inside container.

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

Following code shows how to use align-self property. Here we can see that align-items: stretch is not applicable to second and third items, this property is override by align-self property of items.

.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;
}

CSS Flexbox Container Properties

以下是可应用于 flex 容器的所有 CSS 属性。

Following are all the CSS properties that can be applied to flex container.

Property

Value

Example

flex-direction

Sets the flex direction of the flex items.

Try It

flex-wrap

Sets whether flex items should wrap onto the next line

Try It

justify-content

Sets the alignment of flex items along the main axis.

Try It

align-items

Sets the alignment of flex items along the cross axis.

Try It

align-content

Sets the alignment and spacing of flex lines within the flex container.

Try It

flex-flow

Sets both the flex-direction and flex-wrap properties.

Try It

CSS Flexbox Items Properties

以下是可以应用于 flex 项目的所有 CSS 属性。

Following are all the CSS properties that can be applied to flex items.

Property

Value

Example

flex-grow

Sets flex item to grow within a flex container.

Try It

flex-shrink

Sets flex item to shrink in size to fit the available space.

Try It

flex-basis

Sets the initial size of a flex item.

Try It

flex

Shorthand property, combines three flex-related properties: flex-grow, flex-shrink, and flex-basis.

Try It

align-self

Sets the alignment of a specific flex item along the cross-axis.

Try It

order

Used to specify the order in which flex items appear inside their flex container.

Try It