Flexbox for Layout
Use Flexbox to align items in a row or column, distribute space, and wrap content without float hacks.
What Is Flexbox?
Flexbox (Flexible Box Layout) is a CSS layout model designed for one-dimensional layouts — distributing space along a single row or column. It solves problems that float-based layouts couldn't handle elegantly.
Enabling Flexbox
Apply display: flex to the container. Its direct children automatically become flex items. Children of those items are not affected.
.container {
display: flex;
}
/* All direct children are now flex items */