freeCodeCamp/use-the-align-self-property.md at b3cbbe0f3dc0b36b53aa5d0c0338a13c7ebf847e

Files

Oliver Eyton-Williams dec409a4bd fix: s/localeTitle/title/g

2020-10-06 23:10:08 +05:30

1.8 KiB

Raw Blame History

id, challengeType, videoUrl, forumTopicId, title

id	challengeType	videoUrl	forumTopicId	title
587d78af367417b2b2512b00	0	https://scrimba.com/p/pVaDAv/cMbvzfv	301107	使用 align-self 属性

Description

flex 子项目的最后一个属性是align-self。这个属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。因为float、clear和vertical-align等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。 align-self可设置的值与align-items的一样，并且它会覆盖align-items的值。

Instructions

在#box-1和#box-2添加 CSS 属性align-self。#box-1设为 center，#box-2设为 flex-end。

Tests

tests:
  - text: <code>#box-1</code>元素应有<code>align-self</code>属性，其值应为 <code>center</code>。
    testString: assert($('#box-1').css('align-self') == 'center');
  - text: <code>#box-2</code>元素应有<code>align-self</code>属性，其值应为 <code>flex-end</code>。
    testString: assert($('#box-2').css('align-self') == 'flex-end');

Challenge Seed

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Solution

// solution required

1.8 KiB Raw Blame History Unescape Escape