Wrapped flex row items start at top

Question

Whilst trying to answer this question, I was trying to come up with a flex solution. The closest I could get was this:

.container {
  height: 500px;
  width: 500px;
  background-color: red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between;  /* puts spacing between left and right column */
}


.headerTitle {
  width:100%;
  height: 24px;
  margin: 24px 24px 0;
  padding: 0;
  line-height: 24px;
}

.sectionClass {
  width: 249px;
  height: 200px;
  background-color: yellow;
}

.rightSideDiv {
  width: 249px;
  height: 200px;
  border: 4px solid green;
  box-sizing:border-box;     /* need this otherwise border  will take an extra 8px width in some browsers */

}

<aside>
  <div class="container">
    <header class="headerTitle"> Header Title </header>
    <section class="sectionClass"> . </section>
    <div class="rightSideDiv"> </div>
  </div>
</aside>

However, I couldn't make the 2 lower boxes start flush to the top heading. Is there a way of doing this using flex? I tried align-items and align-self but that didn't seem to do anything.

I also tried adding a pseudo element to the container with flex-grow:1; but it didn't grow in the required manner.

It would be interesting to see if flex can handle this as I'm still trying to learn the intricacies of it

Related (possibly a canonical dupe target, but I haven't spent a lot of time with flexbox questions on SO) https://stackoverflow.com/a/34611670/2756409 — TylerH, Feb 19 '18 at 15:12
If by any chance you *haven't* seen Michael_B around [tag:css], and you still need help with flexbox, definitely spend some time checking out [his answers](https://stackoverflow.com/search?q=user:3597276+[flexbox]) on the subject. He covers CSS Grid Layout pretty well, too. — TylerH, Feb 19 '18 at 15:13

VXp · Accepted Answer · 2020-04-16T17:53:10.377

7

Just add align-content: flex-start to the .container div:

.container {
  height: 500px;
  width: 500px;
  background-color: red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between; /* puts spacing between left and right column */
  align-content: flex-start;
}

.headerTitle {
  width:100%;
  height: 24px;
  margin: 24px 24px 0;
  padding: 0;
  line-height: 24px;
}

.sectionClass {
  width: 249px;
  height: 200px;
  background-color: yellow;
}

.rightSideDiv {
  width: 249px;
  height: 200px;
  border: 4px solid green;
  box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}

<aside>
  <div class="container">
    <header class="headerTitle"> Header Title </header>
    <section class="sectionClass"> . </section>
    <div class="rightSideDiv"> </div>
  </div>
</aside>

edited Apr 16 '20 at 17:53

answered Feb 19 '18 at 14:56

VXp

11,598
6
31
46

ah nice, knew it would be something simple. What's the difference between align items and align content? – Pete Feb 19 '18 at 15:14
2

@Pete [What's the difference between align-content and align-items?](https://stackoverflow.com/questions/27539262/whats-the-difference-between-align-content-and-align-items) – TylerH Feb 19 '18 at 15:20
Perfect, thanks @TylerH – Pete Feb 19 '18 at 15:21

Wrapped flex row items start at top

1 Answers1