freeCodeCamp

3.0 KiB

Raw Blame History

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

一个示例有助于显示此属性的运行情况。将CSS属性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

3.0 KiB Raw Blame History Unescape Escape