Use the align-self Property

HTML-CSS
1

Tell us what’s happening:

Can someone explain to me whether the default direction for flex is column ?

Because in a previous exercise the display: flex created a horizontal flexbox.

I want to understand why the boxes in this exercise were not aligned horizonally,

thanks.

My code so far


<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

No it’s not. It’s row.

align- properties move elements across main flex axis. So in this case flex is row and therefore first element will be centered vertically and the second will go to the bottom (flex-end, but across main - row - axis).

Maybe not the best explanation, but that’s how I remember it.

3

If the flex is row, should the box move up-down or left-right?

4

“align will move across” - so up-down.

1 Like
5

thanks that reply with the bold a helps …