freeCodeCamp/use-the-align-self-property.english.md at 62dcb1f3faad4402251ab1fc461accc4bece1d3b

Files

Oliver Eyton-Williams f1c9b08cf3 fix(curriculum): add isHidden: false to challenges

This includes certificates (where it does nothing), but does not
include any translations.

2020-05-25 16:25:19 +05:30

2.3 KiB

Raw Blame History

id, title, challengeType, isHidden, videoUrl, forumTopicId

id	title	challengeType	isHidden	videoUrl	forumTopicId
587d78af367417b2b2512b00	Use the align-self Property	0	false	https://scrimba.com/p/pVaDAv/cMbvzfv	301107

Description

The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items. align-self accepts the same values as align-items and will override any value set by the align-items property.

Instructions

Add the CSS property align-self to both #box-1 and #box-2. Give #box-1 a value of center and give #box-2 a value of flex-end.

Tests

tests:
  - text: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of <code>center</code>.
    testString: assert($('#box-1').css('align-self') == 'center');
  - text: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of <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

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

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

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

2.3 KiB Raw Blame History