<div class="flex-container">
<div class="flex-item">Lorem</div>
<div class="flex-item">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam</div>
<div class="flex-item">Lorem ipsum dolor sit amet</div>
<div class="flex-item">Lorem</div>
<div class="flex-item">Lorem</div>
</div>
.flex-container {
display: flex;
flex-flow: row wrap;
padding: 1rem;
}
.flex-item {
margin: 0.5rem;
padding: 1rem 3rem;
font-size: 1.2rem;
font-family: cursive;
color: #e6c037;
background-color: #784367;
text-align: center;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.