Toggle flex properties and see the layout update live. Copy CSS or Tailwind classes. All flex container and item properties covered.
More free utilities you might find useful
Quick answers to common questions
justify-content controls alignment along the main axis (horizontal for row). align-items controls the cross axis (vertical for row). Use both for center-centering: display: flex; justify-content: center; align-items: center;
Add to the parent: display: flex; justify-content: center; align-items: center; In Tailwind: class="flex justify-center items-center".
Use flexbox for one-dimensional layouts (nav bars, card rows). Use CSS Grid for two-dimensional layouts (page layouts, image galleries).
Your data is processed entirely in your browser. Nothing is sent to any server.
flex-direction
justify-content
align-items
flex-wrap
Gap: 8px
Items: 4
CSS
display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: nowrap; gap: 8px;
Tailwind
flex flex-row justify-start items-center flex-nowrap gap-2