---
id: 587d78ac367417b2b2512af6
title: Align Elements Using the justify-content Property
challengeType: 0
videoUrl: ''
localeTitle: 使用justify-content属性对齐元素
---
## Description
有时,flex容器中的flex项不会填充容器中的所有空间。通常希望告诉CSS如何以特定方式对齐和展开弹性项目。幸运的是, justify-content
属性有几个选项可以做到这一点。但首先,在审查这些选项之前,需要了解一些重要的术语。 这是一个有用的图像,显示了一行来说明下面的概念。回想一下,将flex容器设置为一行可以从左到右并排放置Flex项目。设置为列的弹性容器将弹性项目从上到下放置在垂直堆栈中。对于每个,柔性项目的排列方向称为主轴 。对于一行,这是一条切割每个项目的水平线。对于列,主轴是穿过项目的垂直线。如何沿着作为主轴的直线对弹性项目进行间隔有几种选择。其中最常用的是justify-content: center;
,将所有弹性项目对齐到Flex容器内的中心。其他选择包括: -
flex-start
:将项目对齐到Flex容器的开头。对于一行,这会将项目推送到容器的左侧。对于列,这会将项目推送到容器的顶部。 -
flex-end
:将项目对齐到Flex容器的末尾。对于一行,这会将项目推送到容器的右侧。对于列,这会将项目推送到容器的底部。 -
space-between
:将项目与主轴的中心对齐,在项目之间放置额外的空间。第一个和最后一个项目被推送到Flex容器的最边缘。例如,在第一项中,第一项是在容器的左侧,最后一项是在容器的右侧,然后它们之间的其他项是均匀间隔的。 -
space-around
:类似于space-between
但是第一个和最后一个项目没有锁定到容器的边缘,空间分布在所有项目周围
## Instructions
一个示例有助于显示此属性的运行情况。将CSS属性justify-content
添加到#box-container
元素,并为其赋值为center。 奖金
在代码编辑器中尝试使用justify-content
属性的其他选项来查看它们之间的差异。但请注意,中心值是唯一能够通过此挑战的值。
## Tests
```yml
tests:
- text: '#box-container
元素应该将justify-content
属性设置为center的值。'
testString: 'assert($("#box-container").css("justify-content") == "center", "The #box-container
element should have a justify-content
property set to a value of center.");'
```
## Challenge Seed
## Solution
```js
// solution required
```