A worked example, rendered from real sample data. Sign in to run the tool on your own input.
direction: row
justify: center
align: center
gap: 16px
items: 5.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 16px;
}
/* 5 flex items · shorthand: flex-flow: row nowrap; */
/* Matching markup */
<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>
Generate CSS flexbox layouts from property combinations. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.