What is Flexbox?
Flexbox is a layout system for arranging items in a row or column, with easy alignment and spacing. Set display: flex on the parent, and its children become flex items.
<style>
.row { display: flex; gap: 12px; }
.row div { background: #dbeafe; padding: 20px; border-radius: 10px; }
</style>
<div class="row"><div>One</div><div>Two</div><div>Three</div></div>Main properties on the container
flex-direction:row(default),column,row-reverse,column-reversejustify-content: alignment along the main axis, such asflex-start,center,space-between,space-aroundalign-items: alignment on the cross axis, such asstretch,center,flex-startflex-wrap:wraplets items move to the next linegap: space between items
Properties on items
.item { flex: 1; } /* share space equally */
.item.big { flex: 2; } /* take twice as much */
.item.fixed { flex: 0 0 200px; } /* fixed width */
.item.push { margin-left: auto; } /* push to the far end */Example: a navigation bar
<style>
nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: #0f172a; color: white; }
nav ul { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
</style>
<nav><strong>MySite</strong><ul><li>Home</li><li>Notes</li><li>Contact</li></ul></nav>Perfect centering
.center { display: flex; justify-content: center; align-items: center; min-height: 100vh; }Practice
Create a pricing section with three equal cards in a row that wrap onto separate lines on small screens using flex-wrap.