0

I'm currently making use of the flexbox flex-wrap ability with space-between to nicely space out wrapped items, but the last row doesn't align its items with the columns.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width:450px;
  background-color:lightblue;
}
#container > div {
  width: 100px;
  height: 50px;
  background-color: red;
}
#container > div:nth-child(odd){
  height: 30px;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

The items are the same width for now (but the container won't be), but may not be in future. I'm aiming for the following:

Flexbox alignment example

Am I expecting too much from flexbox, or is there a simple alternative approach?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Dan
  • 1,130
  • 2
  • 20
  • 38
  • Regardless, what you are after is not **rows** but **columns**. Felxbox works in 2 directions only. CSS-Grid might offer options though but that might be a little complex. – Paulie_D Oct 26 '18 at 14:49
  • 1
    @Paulie_D That very much doesn't make the question off-topic, and is [not very welcoming](https://meta.stackexchange.com/conduct) without trying to solve the (easily-fixable) issue first. – Dan Oct 26 '18 at 14:52
  • @Paulie_D The [definition](https://stackoverflow.com/help/on-topic) says that questions ideally have source code within them, but it's the subject matter that defines off-topic. And as the saying goes, it's often how you say it. – Dan Oct 26 '18 at 14:57

0 Answers0