3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ad367417b2b2512af8 | Align Elements Using the align-items Property | 0 | 使用align-items属性对齐元素 |
Description
align-items
属性类似于justify-content
。回想一下, justify-content
属性沿主轴对齐flex项目。对于行,主轴是水平线,对于列,它是垂直线。 Flex容器还具有与主轴相反的横轴。对于行,横轴是垂直的,对于列,横轴是水平的。 CSS提供align-items
属性以沿着交叉轴对齐flex项。对于一行,它告诉CSS如何在容器内向上或向下推动整行中的项目。对于列,如何在容器内向左或向右推送所有项目。 align-items
可用的不同值包括: -
flex-start
:将项目对齐到Flex容器的开头。对于行,这会将项目对齐到容器的顶部。对于列,这会将项目对齐到容器的左侧。 -
flex-end
:将项目对齐到Flex容器的末尾。对于行,这会将项目对齐到容器的底部。对于列,这会将项目对齐到容器的右侧。 -
center
:将项目对齐到中心。对于行,这会垂直对齐项目(项目上方和下方的空格相等)。对于列,它会水平对齐它们(项目左侧和右侧的空格相等)。 -
stretch
:拉伸项目以填充弹性容器。例如,行项目被拉伸以从上到下填充Flex容器。 -
baseline
:将项目与其基线对齐。基线是一个文本概念,将其视为字母所在的行。
Instructions
align-items
添加到#box-container
元素,并为其指定center值。 奖金 在代码编辑器中尝试使用
align-items
属性的其他选项来查看它们之间的差异。但请注意,中心值是唯一能够通过此挑战的值。 Tests
tests:
- text: '<code>#box-container</code>元素的<code>align-items</code>属性应设置为center的值。'
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</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: 200px;
font-size: 24px;
}
#box-2 {
background-color: orangered;
width: 200px;
font-size: 18px;
}
</style>
<div id="box-container">
<div id="box-1"><p>Hello</p></div>
<div id="box-2"><p>Goodbye</p></div>
</div>
Solution
// solution required