Question about flex-start vs flex-end

What exactly does start mean? The left side or top?
What exactly does end mean? The right side or bottom?

With the following code:

.background-buildings {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;

The buildings look like this

then when you change to flex-end the buildings move to the bottom.

Then in this example flex-endlooks like this:

and flex-start sends it to the left border.

My question is: Why aren’t the boxes moving in the same way as the buildings? Why aren’t they stuck down at the bottom?

the alignment is set along the main axis (if the flex display main axis is x, then alignment is based on horizontal movement, if it is y, then it is based on vertical movement)

check the alignment setup for the buildings, was it row (x) or column (y) vs the other example (row or column)

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #aa80ff;

Thanks for answering.

So the css for the purple building has align-items: center; which would mean it’s moving on its y axis, right?

Does justify-content then move it along the x axis, then?

Thanks again :slight_smile:

this is the axis specification. column here means y (items are displayed like a column)

1 Like

Gotcha. Thanks Hbar1st :slight_smile: