freeCodeCamp

3.4 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ac367417b2b2512af6	Align Elements Using the justify-content Property	0		使用justify-content属性对齐元素

Description

有时，flex容器中的flex项不会填充容器中的所有空间。通常希望告诉CSS如何以特定方式对齐和展开弹性项目。幸运的是， justify-content属性有几个选项可以做到这一点。但首先，在审查这些选项之前，需要了解一些重要的术语。这是一个有用的图像，显示了一行来说明下面的概念。回想一下，将flex容器设置为一行可以从左到右并排放置Flex项目。设置为列的弹性容器将弹性项目从上到下放置在垂直堆栈中。对于每个，柔性项目的排列方向称为主轴。对于一行，这是一条切割每个项目的水平线。对于列，主轴是穿过项目的垂直线。如何沿着作为主轴的直线对弹性项目进行间隔有几种选择。其中最常用的是justify-content: center; ，将所有弹性项目对齐到Flex容器内的中心。其他选择包括：

flex-start ：将项目对齐到Flex容器的开头。对于一行，这会将项目推送到容器的左侧。对于列，这会将项目推送到容器的顶部。
flex-end ：将项目对齐到Flex容器的末尾。对于一行，这会将项目推送到容器的右侧。对于列，这会将项目推送到容器的底部。
space-between ：将项目与主轴的中心对齐，在项目之间放置额外的空间。第一个和最后一个项目被推送到Flex容器的最边缘。例如，在第一项中，第一项是在容器的左侧，最后一项是在容器的右侧，然后它们之间的其他项是均匀间隔的。
space-around ：类似于space-between但是第一个和最后一个项目没有锁定到容器的边缘，空间分布在所有项目周围

Instructions

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

3.4 KiB Raw Blame History Unescape Escape