freeCodeCamp

2.1 KiB

Raw Blame History

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

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

2.1 KiB Raw Blame History