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