Is It Possible For Flex Items to Align Tightly to the Items Above Them

How do I make flex items fit the height of two rows?

You could do it with grid like this.

body {  background-color: black;}
.grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-gap: 15px;}
.tall {  grid-row: 1 / 3;  grid-column: 3;}
.grid-box {  background-color: #9e9e9e;}

<div class="grid">  <div class="grid-box">    <p>This box has little text.</p>  </div>  <div class="grid-box">    <p>This box is diffrent than small. It has a middleish amout of text.</p>  </div>  <div class="grid-box tall">    <p>This box is diffrent than small and middleish. It has a lot of text. Thus, I want it to continue onto the next row of flexboxes.</p>  </div>  <div class="grid-box">    <p>This box has little text.</p>  </div>  <div class="grid-box">    <p>This box is diffrent than small. It has a middleish amout of text.</p>  </div></div>

Flexbox and alignment of wrapped items

You have to add

align-content: flex-start;

to your .flex-container.

.flex-container {  padding: 0;  margin: 0;  list-style: none;  border: 1px solid silver;  -ms-box-orient: horizontal;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -moz-flex;  display: -webkit-flex;  display: flex;  width: 520px;  height: 520px;  -webkit-flex-wrap: wrap;  flex-wrap: wrap;  align-content: flex-start;}
.flex-item {  background: gold;  padding: 5px;  width: 100px;  height: 100px;  margin: 10px;    line-height: 100px;  color: white;  font-weight: bold;  font-size: 2em;  text-align: center;}

<ul class="flex-container wrap">  <li class="flex-item">1</li>  <li class="flex-item">2</li>  <li class="flex-item">3</li>  <li class="flex-item">4</li>  <li class="flex-item">5</li>  <li class="flex-item">6</li>  <li class="flex-item">7</li>  <li class="flex-item">8</li></ul>

Flexbox: Two elements on top of each other in flex-direction: row

You could do this with Flexbox but you need to use fixed height on flex container. Here is Fiddle

Basically you use flex-wrap: wrap with flex-direction: column and make first item take 100% height and set width in %. Then you change order with media queries and height.

* {  box-sizing: border-box;}main,div {  display: flex;  padding: 1rem;}.desktop {  flex-direction: column;  flex-wrap: wrap;  height: 400px;  width: 100%;}div {  flex: 1;  width: 30%;}[orange] {  background-color: #FFAD77;  flex: 0 0 70%;}[yellow] {  background-color: #FFE377;  flex: 0 0 100%;  width: 70%;}[purple] {  background-color: #FF77C8;}@media(max-width: 480px) {  .desktop div {    flex: 1;    width: 100%;  }  div[orange] {    order: -1;    flex: 2;  }  div[yellow] {    flex: 5;  }  div[purple] {    flex: 1;  }}

<div class="desktop">  <div yellow>lorem</div>  <div orange>lorem</div>  <div purple>lorem</div></div>

Equal width flex items even after they wrap

Currently, flexbox offers no clean solution for aligning flexible items in the last row or column. It's beyond the scope of the current spec.

Here's more information and various solutions people have used to get around the problem:

Targeting flex items on the last row
Is it possible for flex items to align tightly to the items above them?

However, last-row alignment is not a problem with another CSS3 technology, Grid Layout. In fact, it's very simple with this method (and requires no changes to the HTML):

.container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  grid-auto-rows: 20px;  grid-gap: 5px;}
.item {  background: yellow;  text-align: center;  border: 1px solid red;}

<div class="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div>  <div class="item">8</div>  <div class="item">9</div>  <div class="item">10</div></div>

CSS Flex Styling with floated elements

Unfortunately this is not easily possible with display: flex. It is however with display: grid!
The property you are looking for is grid-auto-flow: dense;

Here is an example: https://codepen.io/rachelandrew/pen/beBeKJ

It works by backfilling the gaps as items are placed on the grid.

Another option would be to use a javascript plugin like masonry.