Flexbox zombies, chapter 10.3. Help!

#1

Hi,
Can anyone please explain why align-items: for this task is center and not flex-start. Visually it looks like flex-start.

crossbow {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-between;
}

.target:nth-of-type(2) {
flex-grow: 1;
}

#2

Hi @50Grosh

The difference between flex-start and center can be identified when the outer div has a fixed large height than the children and when you remove align-content: space-between;. space-between property makes it almost look same.

In general when align-items is flex-start the child will be on top position of the div in cross axis, when it is center the child will be in center position of the div in the cross axis.

#3

Hi, John,

Thank you for your reply. Please forgive my stupidity, but what is outer div in this particular example, and which goo has a fixed large height? https://mastery.games/flexboxzombies/chapter/10/level/13

And that’s why align-items: center in this case doesn’t make any sense to me, because the items are at the top of the container when it’s not wrapped, which should be align-items: flex-start, right?

#4

Hi @50Grosh

The outer div will be the parent where are applying the style crossbow . In this tutorial it is the large square in which you are seeing the outer div or parent div and the cross bow is the child.

I am seeing Flexbox zombie for the first time so I did not understand how to test it there. So i created a sample code on the below page. Test the code by updating align-items.
https://codepen.io/johnvs/pen/qBQmXgr

And also when you update the height from 200px to auto. You will not find any difference between flex-start and center of align-items

Hope this helps😃

#5

Hi, John,

Thank you for your sample code. It all makes perfect sense to me. Unfortunately, that particular Flex Zombies challenge still doesn’t.