Flex-wrap affect on align-items confusion, help needed

Get Help CSS
#1

Hi, I’m getting quite confuse by the action of flex-wrap on align-items. I have a container, 4 items with align-items to flex-end putting them at the bottom of the page. When I add flex-wrap they align to the center and I can’t understand why.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="resources/CSS/styles.css";>

</head>

<body>

    <div class="container">

        <div class="item item1">1</div>

        <div class="item item2">2</div>

        <div class="item item3">3</div>

        <div class="item item4">4</div>

    </div>

</body>

</html>

body {

    margin: 0;

    padding: 0;

}

.item {

    font-size: 150px;

    color: rgb(0, 0, 0);

    width:150px;

    height: 150px;

}

.container {

    height: 800px;

    width: 500;

    background-color: rgb(173, 157, 157);

    display: flex;

    flex-direction: row;

    justify-content:flex-end;

    flex-wrap:wrap;

    align-content:center;

    align-items: flex-end;

  }

  

  .item:nth-of-type(3) {

    flex-grow:1;

  }

  .item1 {

      background-color: blue;

  }

  .item2 {

      background-color: rgb(0, 255, 0);

  }

  .item3 {

    background-color: rgb(255, 0, 234);

}

.item4 {

    background-color: rgb(255, 1, 1);

}

43565789796543
435657897965431243×887 17.4 KB
2354376578689
2354376578689849×817 13.8 KB

See the Pen flex-wrap_align-items problem by craig burton (@portmanteau2) on CodePen.

#2

Hey, @bilsner

align-content property kicks in when you wrap multiple items across rows or columns meaning originally when you didn’t wrap any the row, this property was not active and that’s why the flex items were aligned at the bottom of the flexbox because of the align-items property. However, when you wrap the items, you start having multiple rows, and this is when the align-content property overrides the align-items property and the flex items move to the center of the page.

You can read more about this here: align-content | CSS-Tricks

Feel free to ask any questions if you’re still confused. Flexbox is a very confusing topic but not as confusing as having to float and clear to align and center items in the page. Haha.

2 Likes
#3

Aaahh.

So it’s not a weird effect, it just turns off align-items and the flex-wrap default takes over?

Thanks very much Goku-Kun, really appreciate the help.

Edit: I just read the explanation again and it’s not the flex-wrap default, it’s the align content I had set to center that took effect when flex-wrap overrides align-items. I really have got it now. (honest)

1 Like
#4

CSS tricks has really great articles explaining each of the properties. It is a great resource to understand CSS in depth. Whenever you see that CSS isn’t working as what you’re expecting it to be, always hop off to CSS tricks and read about the property you’re using and you’ll almost always immediately understand what’s going on.

I’d appreciate if you consider the above post as a solution. xD

1 Like
#5

Awesome, I will remember to do that. Thanks again GK!

1 Like
#6

Yeah. So, I completely removed the align-items property and changed the align-content to flex-end. This is what you were looking to do originally, right?

.container {
  height: 800px;
  width: 500;
  background-color: rgb(173, 157, 157);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end;
}

image
image624×972 10.5 KB

1 Like
#7

The origin of the ‘problem’ is a flexbox-zombies question that stumped me. I think the question was just worded oddly and had only one solution where several could work. In other words, you could have align-items set to anywhere and then you add wrap and align content takes over. I think that was the point, to make you realize align-items becomes redundant, I totally didn’t get it until you explained it.

1 Like
#8

It doesn’t exactly take over. There is a condition which makes it not useful in this scenario. Both are pretty useful in their own scenarios. The difference is when you have extra space in the flexbox, you will have to use align-content but let’s say that at least one element is much tall as compared to other elements, then you’ll have to use align-items.

justify-content and align-items can be thought of as counter parts in perpendicular axes. YES! justify-content and align-items, and not justify-content and align-content or at least that’s how the specifications explain it.

So, if your flexbox has more height than the highest element and if you wrap, you’ll have to use align-content and not align-items.

And if your flexbox is the same height as the tallest element, then you can get by with align-items in that case.

At least that’s how I remember it.

1 Like
#9

There’s a really great resource to learn more about flexbox. You can check it out here. This guy explains flexbox in much detail. Hope that helps!

1 Like
#10

Thanks, it really is quite a nuanced rule, I will have to read this more than a few times to make it stick I think. Thanks for the WesBos link, I just signed up.

1 Like