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