meet it

and `auto` margins move one child on its own.

align-items sets the cross-axis spot for every child. align-self goes on one child and overrides it, for that child only. align-self: flex-end sends one card to the bottom of the row.

On the main axis, flexbox has no justify-self. Instead, margin-left: auto on a child soaks up all the free space to its left. It pushes that child, and everything after it, to the far end.

That is the classic menu bar: a logo on the left, and margin-left: auto on the first link to slide the links over to the right.

<nav class="menu">
  <a href="https://example.com/">Fresh Bakes</a>
  <a class="push" href="https://example.com/shop">Shop</a>
  <a href="https://example.com/help">Help</a>
</nav>

.menu {
  display: flex;
  gap: 16px;
  padding: 12px;
  background-color: bisque;
}
.push {
  margin-left: auto;
}

Press show my page to see it here.

<nav> is a box for a page's main links. It behaves like a <div>.

guess first

Everyone at the top, one told otherwise. Where does it go?

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="row">
  <div class="day">Mon</div>
  <div class="day">Tue</div>
  <div class="day late">Wed</div>
</div>

.row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  height: 160px;
}
.day {
  padding: 12px;
  background-color: lightgreen;
}
.late {
  align-self: flex-end;
}

your turn

Your turn. Push the basket to the right.

Fill in the property so the basket link soaks up the free space on its left and slides to the far right of the bar.

the page you’re styling

<div class="bar">
  <a href="https://example.com/">Fresh Bakes</a>
  <a href="https://example.com/menu">Menu</a>
  <a class="basket" href="https://example.com/basket">Basket</a>
</div>

your css

Your code

Press show my page to see it here.

the bar is still a flex rownot checked yet
the basket has an auto left marginnot checked yet

fix it

The sale sticker should sit at the bottom. Fix it!

the page you’re styling

<div class="shelf">
  <div class="jar">Jam</div>
  <div class="jar">Honey</div>
  <div class="jar sale">Half price</div>
</div>

your css

Broken code to fix

Press show my page to see it here.

the sticker sits at the bottomnot checked yet
the other jars stay at the topnot checked yet

Flexbox ignores one of these properties completely. Which one?
Flexbox has no justify-self. One child on the cross axis uses align-self.
Change justify-self to align-self, then press run.

nailed it

you moved one child on its own. :D

align-self overrides align-items for one child.
margin-left: auto pushes a child to the far end.
Flexbox has no justify-self; use an auto margin instead.

new words in your collection

align-self

This lesson isn’t saved. A free account remembers every lesson you finish.

align-self and auto margins move one child on its own.

Everyone at the top, one told otherwise. Where does it go?

Your turn. Push the basket to the right.

The sale sticker should sit at the bottom. Fix it!

you moved one child on its own. :D

and `auto` margins move one child on its own.