How do you fill a parent div with different height flexboxes, smoothly alligned?

Question

I want to present ads in a way that smoothly places them (mainly) next to each other. But when they enter next row, they should be placed directly underneath the above one. See picture.

Above is what code gives me. Below is what I want.

Children need to flex wrap while aligning at flex start, but won't let me

CSS:

.annonser {
    border: 1px solid white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 15px;
    padding: 10px;
}

.annons {
    align-items: flex-start;
    width: 245px;
}

Annonser: Parent div Annons: Children

Google suggests align-items: flex-start should fix the problem, but I can still see visually that children allign their "height" to the tallest child.

I'm very grateful for any help!

Edit: Setting aling-items: flex-start to parent provides the same result...

.annonser {
  border: 1px solid white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 15px;
  padding: 10px;
}

.annons {
  align-items: flex-start;
  width: 245px;
}

<div class="annonser">
    <div class="annons">
        <div class="1">
            <p>Header</p>
            <p>Text</p>
            <p>Price</p>
            <p>Recommended</p>
        </div>
    </div>
    <div class="annons">
        <div class="2">
            <p>Header</p>
            <p>Text Text Text Text Text Text Text </p>
            <p>Price</p>
        </div>
        <div class="2">
            <p>Header</p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Price</p>
        </div>
        <div class="2">
            <p>Header</p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Price</p>
        </div>
        <div class="2">
            <p>Header</p>
            <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
            <p>Price</p>
        </div>
        <div class="2">
            <p>Header</p>
            <p>Text</p>
            <p>Price</p>
        </div>
    </div>
</div>

Edited Parent

Edit 2

I inserted a snippet. However I'm working with asp.net MVC, so my ads are autogenerated from a DB. Should act the same though. Instead of generating ads I've made a bunch to represent them the same way. The first type is "more important" but ignore the grandchildren-classes in the snippet.

`align-items: flex-start` is to be added on parent container for alignments, not the child elements. — MJN, Nov 16 '22 at 16:34
Please share jsfiddle or codepen so we can test it and help you :) — MJN, Nov 16 '22 at 16:45
I added a snippet to assist you in getting better answers. Please update it with the smallest HTML that reproduces your issue here. — Mark Schultheiss, Nov 16 '22 at 16:47
@MarkSchultheiss Thank you! I'm new here so that helps a lot. As written in the edit my
's are autogenerated but this should produce the same result... — Ondrew, Nov 16 '22 at 17:02
Just realized they are all the same height. Changed the text-input in the snippet :))))) — Ondrew, Nov 16 '22 at 17:08

Mark Schultheiss · Answer 1 · 2022-11-16T20:40:36.527

The tallest element on a given row (when they wrap) determines the row height. I added some borders and background colors to illustrate. Show full screen then resize your browser.

.annonser {
  border: 1px solid white;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 15px;
  padding: 10px;
  border: solid 1px purple;
  background-color: #ffddff44;
}

.annons {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  border: solid 1px green;
  background-color: #ddffdd44;
}

.annons>* {
  display: block;
  width: 245px;
  border: solid 1px blue;
  background-color: #ddddff44;
}

.header-two {
  font-size: 1.5em;
  font-weight: bolder;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

<div class="annonser">
  <div class="annons">
    <div class="1">
      <h1>Header</h1>
      <p>Text</p>
      <p>Price</p>
      <p>Recommended</p>
    </div>
  </div>
  <div class="annons">
    <div class="2">
      <h2>Header</h2>
      <p>Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="2">
      <h2>Header</h2>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="2">
      <h2>Header</h2>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="2">
      <div class="header-two">Header</div>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="2">
      <div class="header-two">Header</div>
      <p>Text</p>
      <p>Price</p>
    </div>
  </div>
</div>

Another example without all the space (try changing the .annons 150px and the auto-fill to auto-fit)

.annonser {
  display: flex;
  align-items: flex-start;
  padding: 10px;
  border: solid 1px purple;
  background-color: #ffddff44;
}

.annons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 0.5rem;
  border: dashed 2px #44ff4488;
  padding: 0.1em;
  background-color: #ddffdd44;
}

.annons .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border: solid 1px blue;
  background-color: #ddddff44;
}

.two-much-fun .header-two {
  color: brown;
  border-bottom: 4px double brown;
}


/* do a close match to actual "h2" for an example without the default spacing that and p imply */

.header-two {
  font-size: 1.5em;
  font-weight: bolder;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

<div class="annonser">
  <div class="annons">
    <div class="item 1">
      <h1>Header</h1>
      <p>Text</p>
      <p>Price</p>
      <p>Recommended</p>
    </div>
  </div>
  <div class="annons">
    <div class="item two-much-fun">
      <h2>Header</h2>
      <p>Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="item two-much-fun">
      <h2>Header</h2>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="item two-much-fun">
      <h2>Header</h2>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="item two-much-fun">
      <div class="header-two">Header</div>
      <p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
      <p>Price</p>
    </div>
    <div class="item two-much-fun">
      <div class="header-two">Header</div>
      <p>Text</p>
      <p>Price</p>
    </div>
  </div>
</div>

Thanks so much for the effort. I think a moderator closed this thread, but linked me to another question (how to create a masonry effect). I guess my question could have been better asked. I made it work by adding the following code: .annonser { padding: 0 30px; -moz-column-count: 3; -moz-column-gap: 30px; -webkit-column-count: 3; -webkit-column-gap: 30px; column-count: 3; column-gap: 30px; } .annons { margin: 0 0 30px; display: inline-block; width: 100%; } Thank you for the help, Mark! Good guy you :) — Ondrew, Nov 16 '22 at 19:21

How do you fill a parent div with different height flexboxes, smoothly alligned?

1 Answers1