From 852dedf44d972b2688ad62db167dce974fe9f151 Mon Sep 17 00:00:00 2001
From: hu-qi <huqi1024@gmail.com>
Date: Mon, 18 Mar 2024 22:57:44 +0800
Subject: [PATCH] =?UTF-8?q?CSS=20Flexbox=20=E6=89=8B=E5=86=8C--=E9=99=84?=
 =?UTF-8?q?=E5=B8=A6=E5=AE=9E=E7=94=A8=E7=A4=BA=E4=BE=8B=E7=9A=84=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4=E6=8C=87=E5=8D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 chinese/articles/the-css-flexbox-handbook.md | 554 ++++++++++---------
 1 file changed, 288 insertions(+), 266 deletions(-)

diff --git a/chinese/articles/the-css-flexbox-handbook.md b/chinese/articles/the-css-flexbox-handbook.md
index 38b407edc..bf449d176 100644
--- a/chinese/articles/the-css-flexbox-handbook.md
+++ b/chinese/articles/the-css-flexbox-handbook.md
@@ -3,7 +3,7 @@ title: The CSS Flexbox Handbook – Complete Guide with Practical Examples
 author: Benjamin Semah
 authorURL: https://www.freecodecamp.org/news/author/benjamin-semah/
 originalURL: https://www.freecodecamp.org/news/the-css-flexbox-handbook/
-translator: ""
+translator: "胡琦"
 reviewer: ""
 ---
 
@@ -11,7 +11,7 @@ October 18, 2023 / [#Flexbox][1]
 
 <!-- more -->
 
-# The CSS Flexbox Handbook – Complete Guide with Practical Examples
+# CSS Flexbox 手册--附带实用示例的完整指南
 
 ![Benjamin Semah](https://www.freecodecamp.org/news/content/images/size/w60/2022/09/Benjamin-Semah.jpg)
 
@@ -19,84 +19,84 @@ October 18, 2023 / [#Flexbox][1]
 
   ![The CSS Flexbox Handbook – Complete Guide with Practical Examples](https://www.freecodecamp.org/news/content/images/size/w2000/2023/10/The-CSS-Flexbox-Handbook-Cover.png)
 
-Flexbox is a useful tool for creating beautiful and responsive layouts for web pages. In this guide, you will learn everything you need to know to start using CSS Flexbox like a pro. We'll also go through loads of practice examples.
+Flexbox 是一个有用的工具，用于为网页创建美观且响应式的布局。在本指南中，你将学习像专业人士一样开始使用 CSS Flexbox 所需的一切知识。我们还将学习大量练习示例。
 
-This is a perfect resource for you if you are a beginner web developer. It'll also be useful if you're an experienced developer who wants to brush up on your responsive web design skills.
+如果你是初学者 web 开发人员，本指南对你来说是一份完美的资源。如果你是经验丰富的开发人员，想要提高响应式网页设计技能，它也会很有用。
 
-## Table of Contents
+## 目录
 
--   [What is Flexbox?][3]  
--   [What are the benefits of using Flexbox?][4]
--   [The main axis and the cross axis][5]
--   [Flex Containers and Flex Items][6]
--   [Understanding `Flex` and `Inline-flex`][7]  
+-   [什么是 Flexbox?][3]  
+-   [使用 Flexbox 有什么好处?][4]
+-   [主轴和交叉轴][5]
+-   [Flex 容器和 Flex 项][6]
+-   [了解 `Flex` 和 `Inline-flex`][7]  
 -   [display: flex][8]
 -   [display: inline-flex][9]
--   [The Flex Container Properties][10]
--   [The `flex-direction` Property][11]
--   [The `flex-wrap` Property][12]
--   [The `flex-flow` Shorthand Property][13]
--   [The `justify-content` Property][14]
--   [The `align-items` Property][15]
--   [The `align-content` Property][16]
--   [The `place-content` Property][17]
--   [The Flex Items Properties][18]
--   [The `order` Property][19]
--   [The `align-self` Property][20]
--   [The `flex-grow` Property][21]
--   [The `flex-shrink` Property][22]
--   [The `flex-basis` Property][23]
--   [The `flex` Shorthand Property][24]
--   [Flexbox Gaps][25]
--   [How to Center an Element With Flexbox][26]
--   [Practice with Flexbox Games][27]
--   [Are There Bugs in CSS Fexbox?][28]
--   [Conclusion][29]
+-   [Flex 容器属性][10]
+-   [`flex-direction` 属性][11]
+-   [`flex-wrap` 属性][12]
+-   [`flex-flow` 缩写属性][13]
+-   [`justify-content` 属性][14]
+-   [T`align-items` 属性][15]
+-   [`align-content` 属性][16]
+-   [`place-content` 属性][17]
+-   [Flex 项属性][18]
+-   [`order` 属性][19]
+-   [`align-self` 属性][20]
+-   [`flex-grow` 属性][21]
+-   [`flex-shrink` 属性][22]
+-   [`flex-basis` 属性][23]
+-   [`flex` 缩写属性][24]
+-   [Flexbox 间隙][25]
+-   [如何使用 Flexbox 将元素居中][26]
+-   [通过 Flexbox 游戏练习][27]
+-   [CSS Flexbox 中有 Bug 吗?][28]
+-   [尾声][29]
 
-## What is Flexbox?
+<h2 id="what-is-flexbox">什么是 Flexbox?</h2>
 
-Flexbox is short for "Flexible Box Layout". It's a CSS layout model that simplifies creating complex layouts. It provides a flexible way to align elements and distribute space within a container element.
+Flexbox 是“Flexible Box Layout”的缩写。它是一个 CSS 布局模型，可以简化复杂布局的创建。它提供了一种灵活的方式来对齐元素并在容器元素内分配空间。
 
-The Flexbox layout model is bidirectional. This means you can either arrange your elements in rows, columns, or both. More on that later.
+Flexbox 布局模型是双向的。这意味着你可以按行、列或两者排列元素。稍后会详细介绍。
 
-### What are the benefits of using Flexbox?
+<h3 id="what-are-the-benefits-of-using-flexbox">使用 Flexbox 有什么好处?</h3>
 
-Before Flexbox, it was hard to create complex layouts and responsive web pages. You needed a combination of CSS floats and position properties. This required many workarounds and hacks.
+在 Flexbox 出现之前，创建复杂的布局和响应式网页非常艰难。你需要 CSS 浮动和位置属性的组合。这需要许多变通方法和技巧。
 
-But with Flexbox, you can now do the following with less difficulty and fewer lines of code:
+但使用 Flexbox，你现在可以更轻松、更少的代码行数来实现以下操作:
 
--   Align and center elements using properties like `justify-content` and `align-items`.
--   Develop responsive layouts without writing lots of media queries.
--   Reorder elements without changing the HTML structure
--   Create same-height columns without any extra HTML elements or background images.
+-   使用`justify-content` 和 `align-items` 等属性对齐和居中元素。
+-   无需编写大量媒体查询即可开发响应式布局。
+-   在不改变 HTML 结构的情况下重新排序元素。
+-   创建相同高度的列，无需任何额外的 HTML 元素或背景图片。
 
-Now you know what Flexbox is, along with some of the things you can do with it. Let's see how you can use it.
+现在，你了解了 Flexbox 是什么，以及可以使用它做的一些事情。让我们看看你如何使用它。
 
-### The main axis and the cross-axis
+<h3 id="the-main-axis-and-the-cross-axis">主轴和交叉轴</h3>
 
-The first thing you need to understand about Flexbox is the concept of axes. Every flex container (an element with a `display` property set to `flex` or `inline-flex`) has a main axis and a cross axis.
+关于 Flexbox，你首先需要了解的是轴的概念。每个 Flex 容器（ `display` 属性设置为 `flex` 或 `inline-flex` 的元素）都有一个主轴和一个交叉轴。
 
-The main axis is either horizontal or vertical depending on the value of the `flex-direction`. No worries if you are not familiar with `flex-direction`. You are about to learn it.
+主轴是水平的还是垂直的，具体取决于 `flex-direction` 的值。如果你不熟悉 `flex-direction` , 不用担心。你即将学会它。
 
 ![The main axis and the cross axis when the `flex-direction`](https://www.freecodecamp.org/news/content/images/2023/08/44.-main---cross-axis.png)
 
-_The cross axis and main axis when the `flex-direction` is `row`_
+_`flex-direction` 为 `row` 时的交叉轴和主轴_
 
-In this example, the main axis is horizontal and the cross axis is vertical.
+在这个示例中，主轴是水平的，交叉轴是垂直的。
 
-The following is an example where the the main axis is vertical and the cross axis, is horizontal.
+以下是主轴垂直且交叉轴水平的示例。
 
 ![45.-cross---main-axis](https://www.freecodecamp.org/news/content/images/2023/08/45.-cross---main-axis.png)
 
-_The main axis and cross axis when the `flex-direction` is `column`_
+_`flex-direction` 为 `column` 时的主轴和交叉轴_
 
-## Flex Containers and Flex Items
+<h2 id="flex-containers-and-flex-items">Flex 容器和 Flex 项</h2>
 
-To use all of Flexbox's properties, you need to set the `display` property for an element to `flex` or `inline-flex`.
+要使用 Flexbox 的所有属性，你需要将元素的 `display` 属性设置为 `flex` 或 `inline-flex` 。
 
-This turns the element into a flex container, and the children of that element become flex items.
+这会将元素变成弹性容器，并且该元素的子元素变成弹性项。
 
-Here's an example:
+举个例子:
 
 ```HTML
 <section class="container">  
@@ -114,19 +114,19 @@ Here's an example:
 }
 ```
 
-The  `.container` element is now a flex container. The three div elements are direct children of the `.container` element, which makes them flex items.
+`.container` 元素现在是一个 Flex 容器。这三个 `div` 元素是 `.container` 元素的直接子元素，这使得它们成为 Flex 项。
 
-But the paragraph element inside the third div is not a flex item. This is because it's not a direct child of the `.container` element.
+但第三个 div 内的段落元素不是 Flex 项。这是因为它不是 `.container` 元素的直接子元素。
 
-## Understanding `flex` and `inline-flex`
+<h2 id="understanding-flex-and-inline-flex">了解 <code>Flex</code> 和 <code>Inline-flex</code></h2>
 
-You can use both `flex` and `inline-flex` to make an element a flex container. The difference is in how they interact with surrounding elements.
+你可以使用 `flex` 和 `inline-flex` 使元素成为 Flex 容器。不同之处在于它们与周围元素的交互方式。
 
-### `display: flex`
+<h3 id="display-flex"><code>display: flex</code></h3>
 
-This makes the flex container behave like a block-level element. The flex-container takes up the entire available width of its parent element. It starts on a new line, and the element that comes after it also starts on a new line.
+这使得 Flex 容器的行为类似块级元素。Flex 容器占据其父元素的整个可用宽度。它会在新的一行开始，并且其后的元素也会在新的一行开始。
 
-Example:
+例如:
 
 ```HTML
 <button>Button One</button>
@@ -149,29 +149,29 @@ Example:
 
 ![46.-display-flex](https://www.freecodecamp.org/news/content/images/2023/08/46.-display-flex.png)
 
-_Flex containers behave like block elements when you use `display: flex`_ 
+_当你使用 `display: flex` 时，Flex 容器的行为类似于块元素`_ 
 
-The `.container` element takes up the entire available width of the body (its parent element).
+`.container` 元素占据了主体（其父元素）的整个可用宽度。
 
-### `display: inline-flex`
+<h3 id="display-inline-flex"><code>display: inline-flex</code></h3>
 
-This makes the flex-container behave like an inline-level element. This allows other inline elements (like buttons) to flow alongside it. Using the previous example, this is how the elements will be arranged when you change `display` from `flex` to `inline-flex`.
+这使得 Flex 容器的行为就像一个内联元素。这允许其他内联元素（如按钮）与其并排。使用前面的示例，这就是当你将 `display` 从 `flex` 更改为 `inline-flex` 时元素的排列方式。
 
 ![47.-display-inline-flex](https://www.freecodecamp.org/news/content/images/2023/08/47.-display-inline-flex.png)
 
-_Flex containers behave like `inline-elements` when you use `display-flex`_
+_当你使用 `display-flex` 时，Flex 容器的行为类似于 `inline-elements`_
 
-The flex container does not take up the entire width of its parent. It uses only as much horizontal space as necessary for its content.
+Flex 容器不占据其父容器的整个宽度。它仅使用其内容所需的水平空间。
 
-[**Practice using flex and inline-flex**][30] **on StackBlitz**
+**在 StackBlitz 上** [**练习使用 flex 和 inline-flex**][30]
 
-## The Flex Container Properties
+<h2 id="the-flex-container-properties">Flex 容器属性</h2>
 
-The flex container properties allow you to control the layout and alignment of the flex items within a flex container.
+Flex 容器属性允许你控制 Flex 容器内 Flex 项的布局和对齐方式。
 
-**NOTE:** You apply these properties on the flex container, and not on its items.
+**注意:** 你可以将这些属性应用于 Flex 容器，而不是 Flex 项。
 
-The following are the flex container properties:
+以下是 Flex 容器属性:
 
 -   `flex-direction`
 -   `flex-wrap`
@@ -181,18 +181,18 @@ The following are the flex container properties:
 -   `align-content`
 -   `place-content`
 
-### The `flex-direction` Property
+<h3 id="the-flex-direction-property"><code>flex-direction</code> 属性</h3>
 
-The `flex-direction` property defines the direction for displaying the flex items. It is what sets the flex container's main axis. This property can take any of these four values:
+`flex-direction` 属性定义了 Flex 项的显示方向。它设置了 Flex 容器的主轴。该属性可以采用以下四个值中的任意一个：
 
--   `row` (default value)
+-   `row` (默认值)
 -   `column`
 -   `row-reverse`
 -   `column-reverse`
 
-Now, let's look at some examples to see how it all works.
+现在，让我们看一些示例，看看它是如何工作的。
 
-In the following code snippet, we have a `names-container` with four names:
+在下面的代码片段中，我们有一个名为 `names-container` 的容器，其中包含四个名字：
 
 ```HTML
 <div class="names-container">  
@@ -203,11 +203,11 @@ In the following code snippet, we have a `names-container` with four names:
 </div>
 ```
 
-Let's see the different ways you can arrange the names using the `flex-direction` property.
+让我们看看使用 `flex-direction` 属性来排列这些名字的不同方式。
 
 #### `flex-direction: row`
 
-This displays the flex-items horizontally from left to right.
+这会从左到右水平显示 Flex 项。
 
 ```CSS
 .names-container {  
@@ -219,57 +219,57 @@ This displays the flex-items horizontally from left to right.
 
 ![1.-flex-direction-row](https://www.freecodecamp.org/news/content/images/2023/08/1.-flex-direction-row.png)
 
-_Example of `flex-direction: row`_
+_示例：`flex-direction: row`_
 
 #### `flex-direction: column`
 
-This displays the flex-items vertically from top to bottom.
+这会从上到下垂直显示 Flex 项。
 
 ![2.-flex-direction-column](https://www.freecodecamp.org/news/content/images/2023/08/2.-flex-direction-column.png)
 
-_Example of `flex-direction: column`_
+_示例：`flex-direction: column`_
 
 #### `flex-direction: row-reverse`
 
-This is the opposite of the row value. It displays the flex items from right to left.
+这与 row 值相反。它从右到左显示 Flex 项。
 
 ![3.-flex-direction-row-reverse](https://www.freecodecamp.org/news/content/images/2023/08/3.-flex-direction-row-reverse.png)
 
-_Example of `flex-direction: row-reverse`_
+_示例：`flex-direction: row-reverse`_
 
 #### `flex-direction: column-reverse`
 
-This is the opposite of the column value. It displays the flex items from the bottom to the top.
+这与 column 值相反。它从下到上显示 Flex 项。
 
 ![4.-flex-direction-column-reverse](https://www.freecodecamp.org/news/content/images/2023/08/4.-flex-direction-column-reverse.png)
 
-_Example of `flex-direction: column-reverse`_
+_示例：`flex-direction: column-reverse`_
 
-[**Practice using flex-direction**][31] **on StackBlitz**
+**在 StackBlitz 上** [**练习使用 flex-direction**][31]
 
-#### A note on the reverse values and accessibility:
+#### 关于反向值和无障碍的注意事项
 
-There's something you need to keep in mind when you use `row-reverse` and `column-reverse`. As you've already seen, both affect the visual order of elements on the screen.
+当你使用 `row-reverse` 和 `column-reverse` 时，有些事情你需要记住。正如你已经看到的，这两个值会影响屏幕上元素的视觉顺序。
 
-But the order in your HTML remains unchanged. And that is the order that screen readers and keyboard navigation controls use.
+但是 HTML 中的顺序保持不变。这就是屏幕阅读器和键盘导航控件使用的顺序。
 
-In the example, when you use `row-reverse`, you see Jack's name first on the screen, followed by Jane, John, and Jill.
+在示例中，当你使用 `row-reverse` 时，你首先在屏幕上看到 Jack 的名字，然后是 Jane、John 和 Jill。
 
-But for someone using a screen reader, they will hear the names as they appear in the HTML and not as they appear on screen. In this case, they will first hear Jill's name, followed by John, Jane, and Jack.
+但是对于使用屏幕阅读器的人来说，他们将会按照 HTML 中的出现顺序而不是屏幕上的顺序来听到这些名字。在这种情况下，他们将首先听到 Jill 的名字，然后是 John、Jane 和 Jack。
 
-### The `flex-wrap` Property
+<h3 id="the-flex-wrap-property"><code>flex-wrap</code> 属性</h3>
 
-Sometimes, the space within the flex container will not be enough for the flex items.
+有时，Flex 容器内的空间不足以容纳 Flex 项。
 
-In such cases, you use the `flex-wrap` property to choose whether to let the flex-items overflow or begin on a new line.
+在这种情况下，你可以使用 `flex-wrap` 属性来选择是让 Flex 项溢出还是另起一行。
 
-The `flex-wrap` property accepts any of the following values:
+`flex-wrap` 属性接受以下任何值：
 
--   `nowrap` (default value)
+-   `nowrap` (默认值)
 -   `wrap`
 -   `wrap-reverse`
 
-To see `flex-wrap` in action, let's add four more names to our `names-container`:
+要看到 `flex-wrap` 的效果，让我们向 `names-container` 添加超过四个的名字：
 
 ```HTML
 <div class="names-container">  
@@ -285,7 +285,7 @@ To see `flex-wrap` in action, let's add four more names to our `names-container`
 
 #### `flex-wrap: nowrap`
 
-This keeps all the flex items on a single line either in a row or column. It allows the flex items to overflow if there's not enough room in the flex container. See the example below:
+这会使所有的 Flex 项都保持在单行中，无论是在行还是列中。如果在 Flex 容器中没有足够的空间，它允许 Flex 项溢出。请看下面的示例：
 
 ```CSS
 .names-container {  
@@ -298,35 +298,35 @@ This keeps all the flex items on a single line either in a row or column. It all
 
 ![5.-flex-wrap-nowrap](https://www.freecodecamp.org/news/content/images/2023/08/5.-flex-wrap-nowrap.png)
 
-_Flex items overflows because `flex-wrap` is set to `nowrap`_
+_因为 `flex-wrap` 被设置为 `nowrap`，所以 Flex 项溢出_
 
-In this example, three names overflow out of the container because there is not enough space for them.
+在这个例子中，由于空间不足，三个名字溢出容器。
 
 #### `flex-wrap: wrap`
 
-This will wrap or push the flex items to the next line if there's not enough room for them.
+当空间不足时，这会将 Flex 项换行或推到下一行。
 
 ![6.-flex-wrap-wrap](https://www.freecodecamp.org/news/content/images/2023/08/6.-flex-wrap-wrap.png)
 
-_Flex items wrap or moves to the next line when `flex-wrap` is set to `wrap`_
+_当 `flex-wrap` 设置为 `wrap` 时，Flex 项会换行或移动到下一行_
 
 #### `flex-wrap: wrap-reverse`
 
-This is the opposite of `wrap`. It moves the overflow items to the next line but in a reverse direction.
+这与 `wrap` 相反。它将溢出的项目移动到下一行，但方向相反。
 
-For example, using `wrap-reverse` on the names container moves overflow items to the next top line instead of the next line below.
+例如，在名字容器上使用 `wrap-reverse` 将溢出项移动到下一个顶行，而不是下面的下一行。
 
 ![7.-flex-wrap-wrap-reverse](https://www.freecodecamp.org/news/content/images/2023/08/7.-flex-wrap-wrap-reverse.png)
 
-_Example of `flex-wrap: wrap-reverse`_
+_示例： `flex-wrap: wrap-reverse`_
 
-[**Practice using flex-wrap**][32] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 flex-wrap**][32]
 
-### The `flex-flow` Shorthand Property
+<h3 id="the-flex-flow-shorthand-property"><code>flex-flow</code> 缩写属性</h3>
 
-The `flex-flow` property is a shorthand for the `flex-direction` and `flex-wrap` properties. This means that when you use `flex-flow`, you can apply both properties with only a single line of code.
+`flex-flow` 属性是 `flex-direction` 和 `flex-wrap` 属性的缩写。这意味着当你使用 `flex-flow` 时，只需一行码即可应用这两个属性。
 
-See the example below using the names container. You can give the container `flex-direction` and `flex-wrap` properties.
+请参阅下面使用名字容器的示例。你可以为容器指定 `flex-direction` 和 `flex-wrap` 属性。
 
 ```CSS
 .names-container {  
@@ -336,7 +336,7 @@ See the example below using the names container. You can give the container `fle
 }
 ```
 
-Or you can use the `flex-flow` shorthand to get the same result.
+或者你可以使用 `flex-flow` 缩写来获得相同的结果。
 
 ```CSS
 .names-container {  
@@ -347,17 +347,17 @@ Or you can use the `flex-flow` shorthand to get the same result.
 
 ![8.-flex-flow](https://www.freecodecamp.org/news/content/images/2023/08/8.-flex-flow.png)
 
-_Example of `flex-flow: column wrap`_
+_示例： `flex-flow: column wrap`_
 
-[**Practice using flex-flow**][33] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 flex-flow**][33]
 
-### The `justify-content` Property
+<h3 id="the-justify-content-property"><code>justify-content</code> 属性</h3>
 
-This `justify-content` property handles the alignment of flex items on the main axis of the flex container.
+`justify-content` 属性处理 Flex 容器主轴上 Flex 项的对齐方式。
 
-You can use it to take care of how space is distributed on the main axis. This property takes any of the following values:
+你可以使用它来处理主轴上空间的分配方式。该属性可以取以下任何值：
 
--   `flex-start` (default value)
+-   `flex-start` (默认值)
 -   `flex-end`
 -   `center`
 -   `space-between`
@@ -366,9 +366,9 @@ You can use it to take care of how space is distributed on the main axis. This p
 
 #### `justify-content: flex-start`
 
-This places the items at the start of the flex-direction. If the main axis is horizontal with a `flex-direction` of `row` (like the example below), it aligns the items to the left. And if it's vertical (with a `flex-direction` of `column`), it aligns the items to the top.
+这将把 Flex 项放置在 `flex-direction` 的起始位置。如果主轴是水平的，`flex-direction` 是 `row`（就像下面的示例），它会将 Flex 对齐到左侧。如果主轴是垂直的（`flex-direction` 是 `column`），它会将 Flex 项对齐到顶部。
 
-Using the names container example, this is how `justify-content: flex-start` would look like:
+使用名字容器示例，`justify-content: flex-start` 的效果如下：
 
 ```CSS
 .names-container {  
@@ -380,55 +380,56 @@ Using the names container example, this is how `justify-content: flex-start` wou
 
 ![9.-justify-content-flex-start](https://www.freecodecamp.org/news/content/images/2023/08/9.-justify-content-flex-start.png)
 
-_Example of `justify-content: flex-start`_ 
+_示例：`justify-content: flex-start`_ 
 
 #### `justify-content: flex-end`
 
 This will place the flex items at the end of the flex-direction of the main axis.
+这会将 Flex 项放置在主轴的 flex-direction 的末尾。
 
 ![10.-justify-content-flex-end](https://www.freecodecamp.org/news/content/images/2023/08/10.-justify-content-flex-end.png)
 
-_Example of `justify-content: flex-end`_
+_示例：`justify-content: flex-end`_
 
 #### `justify-content: center`
 
-This places the flex items at the center of the flex container's main axis.
+这会将 Flex 项目放置在 Flex 容器主轴的中心。
 
 ![11.-justify-content-center-](https://www.freecodecamp.org/news/content/images/2023/08/11.-justify-content-center-.png)
 
-_Example of `justify-content: center`_
+_示例：`justify-content: center`_
 
 #### `justify-content: space-between`
 
-This will place the first flex item at the start of the main axis. And also place the last item at the end of the main axis. Then space on the main axis is distributed equally among the the elements.
+这会将第一个 Flex 项放置在主轴的起始位置，并将最后一个项放置在主轴的末尾。然后，主轴上的空间会均匀分配给这些元素。
 
 ![12.-justify-content-space-between](https://www.freecodecamp.org/news/content/images/2023/08/12.-justify-content-space-between.png)
 
-_Example of `justify-content: space-between`_
+_示例：`justify-content: space-between`_
 
 #### `justify-content: space-evenly`
 
-This distributes space equally among the flex items. This means the space before and after each item is the same.
+这会在 Flex 项之间均匀分配空间。这意味着每个项前后的空间都相同。
 
 ![13.-justify-content-space-evenly](https://www.freecodecamp.org/news/content/images/2023/08/13.-justify-content-space-evenly.png)
 
-_Example of `justify-content: space-evenly`_
+_示例：`justify-content: space-evenly`_
 
 #### `justify-content: space-around`
 
-This also distributes space equally between the flex items. The key difference here is that the space before the first item and after the last item is half the space between the flex items.
+这也会在 Flex 项之间均匀分配空间。这里的关键区别在于，第一个项之前和最后一个项之后的空间是 Flex 项之间空间的一半。
 
 ![14.-justify-content-space-around](https://www.freecodecamp.org/news/content/images/2023/08/14.-justify-content-space-around.png)
 
-_Example of `justify-content: space-around`_
+_示例：`justify-content: space-around`_
 
-[**Practice using justify-content**][34] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 justify-content**][34]
 
-### The `align-items` Property
+<h3 id="the-align-items-property"><code>align-items</code> 属性</h3>
 
-The `align-items` property handles the alignment of flex items on the cross-axis of the flex container. It can take any of the following values:
+`align-items` 属性处理 Flex 项在 Flex 容器交叉轴上的对齐方式。它可以采用以下任意值：
 
--   `stretch` (default value)
+-   `stretch` (默认值)
 -   `flex-start`
 -   `flex-end`
 -   `center`
@@ -436,9 +437,9 @@ The `align-items` property handles the alignment of flex items on the cross-axis
 
 #### `align-items: stretch`
 
-This stretches the flex items to fill up the space within the flex-container.
+这会拉伸 Flex 项以填充 Flex 容器内的空间。
 
-See the example below using a new names container with name cards of different sizes:
+看下面的示例，使用一个新的名字容器，其中包含不同大小的名字卡片：
 
 ```CSS
 .names-container {  
@@ -450,11 +451,12 @@ See the example below using a new names container with name cards of different s
 
 ![15.-align-items-stretch](https://www.freecodecamp.org/news/content/images/2023/08/15.-align-items-stretch.png)
 
-_Example of `align-items: stretch`_
+_示例：`align-items: stretch`_
 
 #### `align-items: flex-start`
 
-This will place the flex items at the start of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, `align-items: flex-start` will place the items at the top.
+
+这会将 Flex 项放置在 Flex 容器的交叉轴的起始位置。如果交叉轴是垂直的，如下例所示， `align-items: flex-start` 会将项放置在顶部。
 
 ```CSS
 .names-container {  
@@ -466,11 +468,11 @@ This will place the flex items at the start of the cross-axis of the flex contai
 
 ![16.-align-items-flex-start](https://www.freecodecamp.org/news/content/images/2023/08/16.-align-items-flex-start.png)
 
-_Example of `align-items: flex-start`_
+_示例：`align-items: flex-start`_
 
 #### `align-items: flex-end`
 
-This will place the flex items at the end of the cross-axis of the flex container. If the cross-axis is vertical like in the example below, `align-items: flex-end` will place the items at the bottom.
+这会将 Flex 项放置在 Flex 容器的交叉轴的末尾位置。如果交叉轴是垂直的，如下例所示， `align-items: flex-end` 会将项放置在底部。
 
 ```CSS
 .names-container {  
@@ -482,11 +484,11 @@ This will place the flex items at the end of the cross-axis of the flex containe
 
 ![17.-align-items-flex-end](https://www.freecodecamp.org/news/content/images/2023/08/17.-align-items-flex-end.png)
 
-Example of `align-items: flex-end`
+示例：`align-items: flex-end`
 
 #### `align-items: center`
 
-This aligns flex items at the center of the cross-axis of the flex container.
+这会将 Flex 项在 Flex 容器的交叉轴的中心对齐。
 
 ```CSS
 .names-container {  
@@ -498,11 +500,11 @@ This aligns flex items at the center of the cross-axis of the flex container.
 
 ![18.-align-items-center](https://www.freecodecamp.org/news/content/images/2023/08/18.-align-items-center.png)
 
-_Example of `align-items: center`_
+_示例：`align-items: center`_
 
 #### `align-items: baseline`
 
-When you use the `baseline` value, flex items are arranged such that their baselines are aligned. See the example below:
+当你使用 `baseline` 值时，Flex 项会被排列，使它们的基线对齐。请参阅下面的示例：
 
 ```CSS
 .names-container {  
@@ -514,15 +516,15 @@ When you use the `baseline` value, flex items are arranged such that their basel
 
 ![Untitled-design-1](https://www.freecodecamp.org/news/content/images/2023/08/Untitled-design-1.png)
 
-_The baseline is indicated with the dotted white line_
+_基线用白色虚线表示_
 
-[**Practice using align-items**][35] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 align-items**][35]
 
-### The `align-content` Property
+<h3 id="the-align-content-property"><code>align-content</code> 属性</h3>
 
-When you have a flex container with wrap (or more than one flex line), you may need to align the lines to distribute the space as you want. That is when you use `align-content`. This property can take any of the following values:
+当你有一个带有换行（或多个 Flex 行）的 Flex 容器时，你可能需要对这些行进行对齐以根据需要分配空间。这时你可以使用 `align-content` 。该属性可以取以下任何值：
 
--   `stretch` (default value)
+-   `stretch` (默认值)
 -   `flex-start`
 -   `flex-end`
 -   `center`
@@ -530,11 +532,11 @@ When you have a flex container with wrap (or more than one flex line), you may n
 -   `space-evenly`
 -   `space-around`
 
-In the example below, there are 11 names in the names container. And the names container element has a `flex-wrap` value of `wrap`. This means you can apply the `align-content` property to change the alignment of the flex lines.
+在下面的示例中，名字容器中有 11 个名字。而且名字容器元素的 `flex-wrap` 值为 `wrap` 。这意味着你可以应用 `align-content` 属性来改变 Flex 行的对齐方式。
 
 #### `align-content: stretch`
 
-This stretches the flex lines to fill up the space within the flex container's cross-axis.
+这会拉伸 Flex 行以填充 Flex 容器交叉轴内的空间。
 
 ```CSS
 .names-container {  
@@ -547,69 +549,69 @@ This stretches the flex lines to fill up the space within the flex container's c
 
 ![20.-align-content-stretch](https://www.freecodecamp.org/news/content/images/2023/08/20.-align-content-stretch.png)
 
-_Example of `align-content: stretch`_
+_示例：`align-content: stretch`_
 
 #### `align-content: flex-start`
 
-This places the flex lines at the start of the container's cross-axis. For example, if the cross axis is vertical like that of the names container, it will place the flex lines at the top.
+这将把 Flex 行放置在容器的交叉轴起始位置。例如，如果交叉轴是垂直的，就像名字容器一样，它会将 Flex 行放置在顶部。
 
 ![21.-align-content-flex-start](https://www.freecodecamp.org/news/content/images/2023/08/21.-align-content-flex-start.png)
 
-_Example of `align-content: flex-start`_
+_示例：`align-content: flex-start`_
 
 #### `align-content: flex-end`
 
-This places the flex lines at the end of the container's cross-axis.
+这会将 Flex 行放置在容器的交叉轴末尾位置。
 
 ![22.-align-content-flex-end](https://www.freecodecamp.org/news/content/images/2023/08/22.-align-content-flex-end.png)
 
-_Example of `align-content: flex-end`_
+_示例：`align-content: flex-end`_
 
 #### `align-content: center`
 
-This places the flex lines at the center of the container's cross-axis.
+这会将 Flex 行放置在容器的交叉轴中心位置。
 
 ![23.-align-content-center](https://www.freecodecamp.org/news/content/images/2023/08/23.-align-content-center.png)
 
-_Example of `align-content: center`_
+_示例：`align-content: center`_
 
 #### `align-content: space-between`
 
-This will place the first flex line at the start of the cross-axis. It also places the last flex line at the end of the cross axis. Then space on the cross-axis is distributed equally between the the lines.
+这会将第一行放置在交叉轴的起始位置。它还会将最后一行放置在交叉轴的末尾位置。然后，交叉轴上的空间会均匀分配给这些行。
 
 ![24.-align-content-space-between](https://www.freecodecamp.org/news/content/images/2023/08/24.-align-content-space-between.png)
 
-_Example of `align-content: space-between`_
+_示例：`align-content: space-between`_
 
 #### `align-content: space-evenly`
 
-This distributes space equally between the flex lines. This means the space before and after each line is the same.
+这会在 Flex 行之间均匀分配空间。这意味着每行前后的空间都是相同的。
 
 ![25.-align-content-space-evenly](https://www.freecodecamp.org/news/content/images/2023/08/25.-align-content-space-evenly.png)
 
-_Example of `align-content: space-evenly`_
+_示例：`align-content: space-evenly`_
 
 #### `align-content: space-around`
 
-This also distributes space equally between the flex lines. The key difference here is the space before the first line and after the last line is half the space between the flex lines.
+这也会在 Flex 行之间均匀分配空间。这里的主要区别在于，第一行之前和最后一行之后的空间是 Flex 行之间空间的一半。
 
 ![26.-align-content-space-around](https://www.freecodecamp.org/news/content/images/2023/08/26.-align-content-space-around.png)
 
-_Example of `align-content: space-around`_
+_示例：`align-content: space-around`_
 
-[**Practice using align-content**][36] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 align-content**][36]
 
-### The `place-content` Property
+<h3 id="the-place-content-property"><code>place-content</code> 属性</h3>
 
-If you need to use both the `justify-content` and `align-content` properties, you use the `place-content` shorthand property.
+如果你需要同时使用 `justify-content` 和 `align-content` 属性，你可以使用 `place-content` 缩写属性。
 
-It can take one or two values. When you give it a single value, the browser will apply the same value for both `justify-content` and `align-content`.
+它可以接受一个或两个值。当你给它一个单一值时，浏览器会为 `justify-content` 和 `align-content` 应用相同的值。
 
-And when you give 2 values for `place-content`, the first value will be for `align-content` and the second for `justify-content`.
+当你为 `place-content` 提供两个值时，第一个值将用于 `align-content` ，第二个值将用于 `justify-content`。
 
-Let's look at an example:
+让我们看一个示例:
 
-Instead of writing this:
+无需这样写:
 
 ```CSS
 .names-container {  
@@ -621,7 +623,7 @@ Instead of writing this:
 }
 ```
 
-You can instead write the following and it will have the same effect:
+你可以改为写下面的代码，效果相同:
 
 ```CSS
 .names-container {  
@@ -634,15 +636,15 @@ You can instead write the following and it will have the same effect:
 
 ![43.-place-content](https://www.freecodecamp.org/news/content/images/2023/08/43.-place-content.png)
 
-_Example of using the `place-content` shorthand_
+_示例：using the `place-content` shorthand_
 
-[**Practice using place-content**][37] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 place-content**][37]
 
-## The Flex Item Properties
+<h2 id="the-flex-items-properties">Flex 项属性</h2>
 
-Every direct child of a flex container is a flex item. So far, you've learned the properties of the flex containers.
+Flex 容器的每个直接子元素都是 Flex 项。到目前为止，你已经学习了 Flex 容器的属性。
 
-Flexbox also has properties that you can apply to individual flex items. They include the following:
+Flexbox 还有一些属性，你可以应用到单个 Flex 项上。它们包括以下内容：
 
 -   `order`
 -   `align-self`
@@ -651,13 +653,13 @@ Flexbox also has properties that you can apply to individual flex items. They in
 -   `flex-basis`
 -   `flex`
 
-### The `order` property
+<h3 id="the-order-property"><code>order</code> 属性</h3>
 
-The `order` property determines the order of appearance for the flex items.
+`order` 属性确定 Flex 项的出现顺序。
 
-The value you give to this property must be a number. A flex item with a lower number will appear before one with a higher number.
+你给这个属性的赋值必须是一个数字。一个数字较小的 Flex 项将出现在数字较大的 Flex 项之前。
 
-In the HTML code, the order for the four names is as follows:
+在 HTML 代码中，四个名字的顺序如下:
 
 1.  Jill
 2.  John
@@ -673,15 +675,15 @@ In the HTML code, the order for the four names is as follows:
 </div>
 ```
 
-You can change the order of appearance on the screen using the `order` property. See the example below.
+你可以使用 `order` 属性改变屏幕上的出现顺序。请参阅下面的示例。
 
-Here's how they appear with no `order` properties:
+以下是没有 `order` 属性时它们的显示方式:
 
 ![27.-no-order-property](https://www.freecodecamp.org/news/content/images/2023/08/27.-no-order-property.png)
 
-_Name cards before add the `order` property_
+_添加 `order` 属性之前的名字卡片_
 
-Now, see how they appear when you add the following order properties:
+现在，看下面的示例，当你添加以下 `order` 属性时它们的显示方式:
 
 ```CSS
 .names-container {  
@@ -712,19 +714,20 @@ Now, see how they appear when you add the following order properties:
 
 ![28.-with-order-property](https://www.freecodecamp.org/news/content/images/2023/08/28.-with-order-property.png)
 
-_The `order` property changes the order of appearance_
+_`order` 属性改变了出现顺序_
+
+**在 StackBlitz 上** [**练习使用 order 属性**][38]
 
-[**Practice using the order property**][38] **on StackBlitz.**
+**警告:** 尽管屏幕上的出现顺序改变了，但 HTML 中的顺序保持不变。而屏幕阅读器使用的是 HTML 中的顺序。如果可能，最佳实践是在 HTML 中改变顺序，而不是使用 Flexbox 进行更改。
 
-**Word of caution:** Even though the order of appearance changes on screen, the order in the HTML remains unchanged. And it's the order in the HTML that screen readers use. Where possible, it's best practice to change the order in the HTML rather than doing it with Flexbox.
+<h3 id="the-align-self-property"><code>align-self</code> 属性</h3>
 
-### The `align-self` property
 
-You can use the `align-self` property to give a flex item a different alignment from the other items.
+你可以使用 `align-self` 属性为一个 Flex 项单独设置不同的对齐方式。
 
-It works the same way as the `align-items` property. The difference is that whereas `align-items` applies to all flex items, the `align-self` property is applied to only specific items.
+它的工作方式与 `align-items` 属性相同。不同之处在于， `align-items` 适用于所有 Flex 项，而 `align-self` 属性仅适用于特定项目。
 
-Example:
+例如:
 
 ```CSS
 .names-container {  
@@ -740,17 +743,18 @@ Example:
 
 ![37.-align-self](https://www.freecodecamp.org/news/content/images/2023/08/37.-align-self.png)
 
-_Example of `align-self` with a `flex-start` value_
+_示例：`align-self` 带有 `flex-start` 值_
 
-In the example, the `align-items` property for the names container has a value of `center`. This aligns all the names at the center.
+在这个示例中，名字容器的 `align-items` 属性设置为 `center`，这会使所有名字都居中对齐。
 
 But using the `align-self` property, you are able to align Jill's name card to the top with a value of `flex-start`.
+但使用 `align-self` 属性，你可以将 Jill 的名字卡片与其他设置为 `flex-start`的顶部对齐。
 
-**[Practice using the align-self property][39] on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 align-self 属性**][39]
 
-### The `flex-grow` property
+<h3 id="the-flex-grow-property"><code>flex-grow</code> 属性</h3>
 
-When you set a container's display to `flex`, often there will be some extra space after the items are arranged. See the example below:
+当你将容器的 `display` 设置为 `flex` 时，通常会在排列项之后有一些额外的空间。请参阅下面的示例：
 
 ```CSS
 .names-container {  
@@ -763,9 +767,10 @@ When you set a container's display to `flex`, often there will be some extra spa
 
 ![29.-flex-grow-extra-space](https://www.freecodecamp.org/news/content/images/2023/08/29.-flex-grow-extra-space.png)
 
-_The flex container has more than enough space for the flex items_
+_Flex 容器有足够的空间容纳 Flex 项_
 
 The browser treats the extra as a value of `1`. This means when you give a `flex-grow` value of `0.5` to only one of the flex items, the browser will add half of the remaining space to the item's size.
+浏览器会将多余的空间视为 `1` 的值。这意味着当你为其中一个 Flex 项的 `flex-grow` 设置为 `0.5` 时，浏览器会将剩余空间的一半添加到该项的大小中。
 
 ```CSS
 #jill {
@@ -775,14 +780,18 @@ The browser treats the extra as a value of `1`. This means when you give a `flex
 
 ![30.-flex-grow-0.5](https://www.freecodecamp.org/news/content/images/2023/08/30.-flex-grow-0.5.png)
 
-_The `flex-grow` property makes the Jill's larger than its initial size_
+_`flex-grow` 属性使 Jill 的大小大于其初始大小_
 
-And if you add a `flex-grow` value of `1` to **only one of the flex items**, the browser will add all the extra space to that item.
+如果你给 **仅一个 Flex 项** 设置了 `flex-grow` 值为 `1` ，浏览器将把所有额外的空间都分配给该项。
 
 **NOTE:** If only one item in the container has a `flex-grow` value, then any value of 1 or more will make it take up all the extra space.
 
 For example, the two code snippets below will have the same effect on Jill's card:
 
+**注意：** 如果容器中只有一个项具有 `flex-grow` 值，则任何值为 1 或更大的值都会使其占据所有额外空间。
+
+例如，下面两个代码片段对 Jill 的卡片具有相同的效果：
+
 ```CSS
 #jill {  
 	flex-grow: 1;
@@ -797,29 +806,30 @@ For example, the two code snippets below will have the same effect on Jill's car
 
 ![31.-flex-grow-1-or-more](https://www.freecodecamp.org/news/content/images/2023/08/31.-flex-grow-1-or-more.png)
 
-_When only one card has a `flex-grow` of `1` or more_
+_当容器中只有一个卡片的 `flex-grow` 为 `1` 或以上时_
 
-What happens when you add `flex-grow` values to more than one element?
+当你为多个元素添加 `flex-grow` 值会发生什么？
 
-The browser will share the extra space proportionately for them.
+浏览器将按比例为它们共享额外的空间。
 
-For example, when you give Jane a `flex-grow` of `3` and Jack a `flex-grow` of `1`, the browser will share the extra space with a `3:1` ratio.
+例如，当你给 Jane 设置 `flex-grow` 为 `3`，给 Jack 设置 `flex-grow` 为 `1` 时，浏览器将以 `3:1` 的比例分享额外的空间。
 
-This means the total value of the extra space becomes `4` (3+1). `Jane` will then get `3/4` of the extra space. And `Jack` will get `1/4` of it.
+这意味着额外空间的总值变为 `4`（3+1）。`Jane` 将获得额外空间的 `3/4`，而 `Jack` 将获得 `1/4`。
 
 ![32.-flex-grow-jane-jack](https://www.freecodecamp.org/news/content/images/2023/08/32.-flex-grow-jane-jack.png)
 
-_The extra space is shared proportionately betwee `Jane` and `Jack`_
+_额外的空间按比例在 `Jane` 和 `Jack` 之间共享_
 
-[**Practice using the flex-grow property**][40] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 flex-grow 属性**][40]
 
-### The `flex-shrink` property
+<h3 id="the-flex-shrink-property"><code>flex-shrink</code> 属性</h3>
 
-The `flex-shrink` property is the opposite of `flex-grow`.
+`flex-shrink` 属性与 `flex-grow` 相反。
 
 You use `flex-grow` when you want to increase the flex item's size if there's extra space. But, you use `flex-shrink` when you want to decrease the flex-item's size if there's not enough space in the flex container.
+当你希望在存在额外空间时增加 Flex 项的大小时，你可以使用 `flex-grow`。但是，当 Flex 容器中的空间不足时，你可以使用 `flex-shrink` 来减小 Flex 项的大小。
 
-See the example below:
+请参阅下面的示例:
 
 ```HTML
 <div class="numbers-container">
@@ -845,33 +855,33 @@ See the example below:
 
 ![33.-flex-shrink-value-2](https://www.freecodecamp.org/news/content/images/2023/08/33.-flex-shrink-value-2.png)
 
-_The first card shrinks to make room for the others_
+_第一张卡片缩小,为其他卡片腾出空间_
 
-In the example, each of the four numbers has a width of 150px (that's a total of 600px). But the `numbers-container` has a width of 400px which is not enough.
+在这个示例中，四个数字每个的宽度都设置为 150px（总共 600px）。但 `numbers-container` 的宽度只有 400px，这是不够的。
 
-The cards have to shrink to fit in the available space. But Number `1` which with a `flex-shrink` value of 2 shrinks to become twice as small as the other numbers.
+卡片必须缩小以适应可用空间。但是 `flex-shrink` 值为 2 的数字 `1` 缩小为其他数字的两倍。
 
-#### What if you don't want a flex item to shrink?
+#### 如果你不希望一个 Flex 项缩小怎么办？
 
-To prevent a flex item from shrinking, give it a `flex-shrink` value of `0`.
+为了防止 Flex 项收缩，给它一个 `flex-shrink` 值为 `0`。
 
-For example, when you give Number `1` a `flex-shrink` of `0`, it will maintain the width of 150px. And the other flex items will shrink to fit in the remaining space.
+例如，当你为 Number `1` 指定 `flex-shrink` 为 `0` 时，它将保持 150px 的宽度。其他 Flex 项将缩小以适应剩余空间。
 
 ![34.-flex-shrink-vallue-0](https://www.freecodecamp.org/news/content/images/2023/08/34.-flex-shrink-vallue-0.png)
 
-The first card does not shrink because it has a `flex-shrink` value of `0`
+第一个卡片不会缩小，因为它的 `flex-shrink` 值为 `0`。
 
-[**Practice using the flex-shrink property**][41] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 flex-shrink 属性**][41]
 
-### The `flex-basis` property
+<h3 id="the-flex-basis-property"><code>flex-basis</code> 属性</h3>
 
-You can use the `flex-basis` property to set the default length of a specific flex item. This is either the width or height of the item depending on the `flex-direction`.
+你可以使用 `flex-basis` 属性来设置特定 Flex 项的默认长度。这取决于 `flex-direction` ，可以是宽度或高度。
 
-If the `flex-direction` is `row` or `row-reverse`, the value for `flex-basis` becomes the initial width of the item.
+如果 `flex-direction` 是 `row` 或 `row-reverse` ，则 `flex-basis` 的值就成为 Flex 项的初始宽度。
 
-And if `flex-direction` is `column` or `column-reverse`, then the value for `flex-basis` becomes the initial height of the item.
+如果 `flex-direction` 是 `column` 或 `column-reverse` ，那么 `flex-basis` 的值就成为 Flex 项的初始高度。
 
-Example:
+例如:
 
 ```CSS
 .names-container {  
@@ -891,14 +901,18 @@ div {
 
 ![35.-flex-basis-height](https://www.freecodecamp.org/news/content/images/2023/08/35.-flex-basis-height.png)
 
-_Example of `flex-basis` setting the height of an item_
+_示例：`flex-basis` 设置 item 的高度_
 
-In the example, the height for the divs is set at 20px. But Jane gets a `flex-basis` value of 60px. And that overrides the 20px given to all the divs.
+在这个示例中，div 的高度设置为 20px。但 Jane 得到的 `flex-basis` 值为 60px。这会覆盖所有 div 的 20px。
 
 **Note:** The flex-basis of 60px becomes the height for Jane because the `flex direction` is `column`. This means the main axis is vertical.
 
 Here is another example. This time, the `flex-direction` is `row`. This means the `flex-basis` will set the width of the item.
 
+注意： Jane 的 `flex-basis` 值为 60px，因为 `flex direction` 是 `column`。这意味着主轴是垂直的。
+
+下面是另一个示例。这次，`flex-direction` 是 `row`。这意味着 `flex-basis` 将设置 Flex 项的宽度。
+
 ```CSS
 .names-container {  
 	display: flex;  
@@ -917,17 +931,18 @@ div {
 
 ![36.-flex-basis-width](https://www.freecodecamp.org/news/content/images/2023/08/36.-flex-basis-width.png)
 
-_Example of `flex-basis` setting the width of an item_
+_示例：`flex-basis` 设置 item 的宽度_
 
-While all the other divs have a width of 70px, Jane has a width of 140px set by the `flex-basis`.
+虽然所有其他 div 的宽度均为 70px，但 Jane 的宽度由 `flex-basis` 设置为 140px。
 
-[**Practice using the flex-basis property**][42] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 flex-basis 属性**][42]
 
-### The `flex` Shorthand Property
+<h3 id="the-flex-shorthand-property"><code>flex</code> 缩写属性</h3>
 
 You can use `flex` as a shorthand for the `flex-grow`, `flex-shrink`, and `flex-basis` properties.
+你可以使用 `flex` 作为 `flex-grow` 、 `flex-shrink` 和 `flex-basis` 属性的缩写。
 
-For example, instead of writing the following:
+例如，无需这样写:
 
 ```CSS
 .flex-item {  
@@ -937,7 +952,7 @@ For example, instead of writing the following:
 }
 ```
 
-You can use the shorthand like so and it will have the same effect:
+你可以像这样使用缩写，它会产生相同的效果：
 
 ```CSS
 .flex-item {  
@@ -945,26 +960,29 @@ You can use the shorthand like so and it will have the same effect:
 }
 ```
 
-The `flex` property can take up to three values. The order of the values is important. The browser assigns the first value for `flex-grow`, the second for `flex-shrink`, and the third for `flex-basis`.
+`flex` 属性最多可以接受三个值。值的顺序很重要。浏览器将第一个值分配给 `flex-grow`，第二个值分配给 `flex-shrink`，第三个值分配给 `flex-basis`。
 
-The default values for `flex` are `1 0 auto`.
+`flex` 的默认值是 `1 0 auto`。
 
-This means if you give `flex` a single value of 2, the browser uses 2 for `flex-grow`. And then it sets `flex-shrink` to 0 and `flex-basis` to auto.
+这意味着如果你给 `flex` 一个值为 2，浏览器将使用 2 作为 `flex-grow`。然后它将 `flex-shrink` 设置为 0，将`flex-basis` 设置为 auto。
 
-[**Practice using the `flex` property**][43] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 `flex` 属性**][43]
 
-## How to Center an Element With Flexbox
+<h2 id="how-to-center-an-element-with-flexbox">如何使用 Flexbox 将元素居中</h2>
 
-One of the headaches for many front-end developers is centering elements. Flexbox has a perfect solution for that.
+让许多前端开发人员头疼的问题之一是元素居中。 Flexbox 对此提供了一个完美的解决方案。
 
-There are two steps involved.
+涉及两个步骤。
 
 1.  Make the parent element a flex container by setting `display` to `flex`.
 2.  Give a value of `center` to both `justify-content` and `align-items`.
 
-That's it! Your element will be perfectly centered.
+1. 通过将 `display` 设置为 `flex` 使父元素成为 Flex 容器。
+2. 将 `justify-content` 和 `align-items` 都设置为 `center`。
+
+就是这样！你的元素将完美居中！
 
-Example:
+例如:
 
 ```HTML
 <div class="name-container">  
@@ -983,19 +1001,19 @@ Example:
 
 ![38.-center-element-w--flexbox](https://www.freecodecamp.org/news/content/images/2023/08/38.-center-element-w--flexbox.png)
 
-_Example of centering an element with Flexbox_
+_示例：使用 Flexbox 居中一个元素_
 
-Whether you're trying to center text, images, or even an entire navigation bar, this will work just fine.
+无论你是试着居中文本、图像，还是整个导航栏，这都能完美运行。
 
-## Flexbox Gaps
+<h2 id="flexbox-gaps">Flexbox 间隙</h2>
 
-You can use the `gap` property to adjust the space between flex items.
+你可以使用 `gap` 属性来调整 flex 项之间的间距。
 
-**NOTE:** You apply the gap property on the flex container and not the flex items.
+**注意：** 你将 gap 属性应用于 Flex 容器，而不是 Flex 项。
 
-`gap` can take two values: the first value for gaps between the rows and the second value for gaps between the columns.
+`gap` 可以取两个值：第一个值用于行之间的间距，第二个值用于列之间的间距。
 
-Example:
+例如:
 
 ```CSS
 .names-container {  
@@ -1008,11 +1026,11 @@ Example:
 
 ![39.-gap-two-values](https://www.freecodecamp.org/news/content/images/2023/08/39.-gap-two-values.png)
 
-_Example of giving two values for the gap property_
+_示例：为 gap 属性指定两个值_
 
-If the gap you want between the rows and the columns is the same, you can use a single value. The browser will apply the same value to both rows and columns.
+如果你想要的行和列之间的间距相同，你可以使用单个值。浏览器将为行和列都应用相同的值。
 
-Example:
+例如:
 
 ```CSS
 .names-container {  
@@ -1025,11 +1043,11 @@ Example:
 
 ![40.-gap-single-value](https://www.freecodecamp.org/news/content/images/2023/08/40.-gap-single-value.png)
 
-_Example of using only one value for both rows and columns gap_
+_示例：行距和列距仅使用一个值_
 
-You can also use the properties `row-gap` if you need to apply a specific gap value between only the rows. and `column-gap` if you need to add gaps between only the columns.
+如果你需要仅在行之间应用特定的间隙值，你还可以使用属性 `row-gap` 。如果你需要仅在列之间添加间隙，则使用 `column-gap` 。
 
-Example: Adding gaps between only the rows:
+例如：仅在行之间添加间距：
 
 ```CSS
 .names-container {  
@@ -1042,9 +1060,9 @@ Example: Adding gaps between only the rows:
 
 ![41.-row-gap](https://www.freecodecamp.org/news/content/images/2023/08/41.-row-gap.png)
 
-_Example of using `row-gap`_
+_示例：使用 `row-gap`_
 
-Example: Adding gaps between only the columns:
+例如: 仅在列之间添加间距：
 
 ```CSS
 .names-container {  
@@ -1057,33 +1075,35 @@ Example: Adding gaps between only the columns:
 
 ![42.-column-gap](https://www.freecodecamp.org/news/content/images/2023/08/42.-column-gap.png)
 
-_Example of using `column-gap`_
+_示例：使用 `column-gap`_
 
-[**Practice using the gap property**][44] **on StackBlitz.**
+**在 StackBlitz 上** [**练习使用 gap 属性**][44]
 
-## Practice with Flexbox Games
+<h2 id="practice-with-flexbox-games">通过 Flexbox 游戏练习</h2>
 
-Want to practice Flexbox in an interactive way? Check out the following games. They provide a hands-on experience for practicing Flexbox in a fun and engaging way.
+
+想要以交互方式练习 Flexbox ？看看以下游戏。它们以有趣且引人入胜的方式提供亲身体验 Flexbox 的实践练习。
 
 -   [Flexbox Froggy][45]
 -   [Flexbox Defense][46]
 -   [Flexbox Zombies][47]
 
-## Are There Bugs in CSS Flexbox?
+<h2 id="are-there-bugs-in-css-flexbox">CSS Flexbox 中有 Bug 吗?</h2>
 
-While CSS Flexbox is a powerful layout tool, it's got a few bugs that may surprise you.
+虽然 CSS Flexbox 是一个强大的布局工具，但它有一些可能会让你感到意外的 bug 。
 
-A common example is that **some HTML elements cannot act as flex containers**. These include the `<button>`, `<fieldset>`, and `<summary>` elements.
+一个常见的例子是 **某些 HTML 元素无法充当 flex 容器**。这些元素包括 `<button>`、`<fieldset>` 和 `<summary>` 元素。
 
-The workaround is to use an element like a `div` to wrap around the element's children. Then use Flexbox on the wrapper `div`.
+解决方法是使用像 `div` 这样的元素来包裹该元素的子元素。然后在包装器 `div` 上使用 Flexbox。
 
-If you are curious about other Flexbox bugs and workarounds, you can have a look at [the Flexbugs repository][48] on GitHub.
+如果你对其他 Flexbox 的 bug 和解决方法感兴趣，可以查看 GitHub 上的 [Flexbugs 仓库][48]。
 
-## Conclusion
+## 尾声
+<h2 id="conclusion">尾声</h2>
 
-In this guide, you learned all the Flexbox properties, their values, and how to use them to create responsive layouts. You also learned about some games like Flexbox Froggy you can use for practice.
+在本指南中，你学习了所有 Flexbox 属性、它们的值以及如何使用它们创建响应式布局。你还了解了一些像 Flexbox Froggy 这样的游戏，可以用来练习。
 
-Thank you for reading, and happy coding! For more in-depth tutorials, feel free to [subscribe to my YouTube channel][49].
+感谢你的阅读，祝你编码愉快！欢迎[订阅我的 YouTube 频道][49]以获取更深入的教程。
 
 ---
 
@@ -1091,14 +1111,16 @@ Thank you for reading, and happy coding! For more in-depth tutorials, feel free
 
 [Benjamin Semah][50]
 
-Software Developer | Technical Writer
+软件开发者 | 技术作家
 
 ---
 
-If you read this far, thank the author to show them you care. Say Thanks
+如果你一直阅读到这里，请感谢作者，以表达你的关心。说声谢谢。
 
 Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started][51]
 
+免费学习编程。 freeCodeCamp 的开源课程已帮助超过 40,000 人找到开发人员的工作。[开始学习][51]
+
 [1]: /news/tag/flexbox/
 [2]: /news/author/benjamin-semah/
 [3]: #what-is-flexbox