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

Oliver Eyton-Williams 2b9e38a17b

fix: replace .english.md extension with .md

2020-09-29 22:09:04 +02:00

2.3 KiB

Raw Blame History

id, title, challengeType, videoUrl, forumTopicId

id	title	challengeType	videoUrl	forumTopicId
587d78af367417b2b2512b00	Use the align-self Property	0	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