--- id: 587d78af367417b2b2512b00 title: Use the align-self Property challengeType: 0 videoUrl: '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
```yml tests: - text: The #box-1 element should have the align-self property set to a value of center. testString: assert($('#box-1').css('align-self') == 'center', 'The #box-1 element should have the align-self property set to a value of center.'); - text: The #box-2 element should have the align-self property set to a value of flex-end. testString: assert($('#box-2').css('align-self') == 'flex-end', 'The #box-2 element should have the align-self property set to a value of flex-end.'); ```
## Challenge Seed
```html
```
## Solution
```js // solution required ```