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
:将项目与其基线对齐。基线是一个文本概念,将其视为字母所在的行。 align-items
添加到#box-container
元素,并为其指定center值。 奖金 align-items
属性的其他选项来查看它们之间的差异。但请注意,中心值是唯一能够通过此挑战的值。 #box-container
元素的align-items
属性应设置为center的值。'
testString: 'assert($("#box-container").css("align-items") == "center", "The #box-container
element should have an align-items
property set to a value of center.");'
```
Hello
Goodbye