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.
Elements of Flexbox
-
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'.
-
Flexbox items: Flexbox items are direct children of flexbox container. This items can be arranged vertically and horizontally inside flexbox container based on need.
-
Main Axis: Main axis is primary axis along which items arranged in a container. By default this is horizontal axis.
-
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:

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-content
和 align-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 |
Sets the flex direction of the flex items. |
||
Sets whether flex items should wrap onto the next line |
||
Sets the alignment of flex items along the main axis. |
||
Sets the alignment of flex items along the cross axis. |
||
Sets the alignment and spacing of flex lines within the flex container. |
||
Sets both the flex-direction and flex-wrap properties. |
CSS Flexbox Items Properties
以下是可以应用于 flex 项目的所有 CSS 属性。
Following are all the CSS properties that can be applied to flex items.
Property |
Value |
Example |
Sets flex item to grow within a flex container. |
||
Sets flex item to shrink in size to fit the available space. |
||
Sets the initial size of a flex item. |
||
Shorthand property, combines three flex-related properties: flex-grow, flex-shrink, and flex-basis. |
||
Sets the alignment of a specific flex item along the cross-axis. |
||
Used to specify the order in which flex items appear inside their flex container. |