Modern Layouts with Flexbox
The Flexible Box Module (Flexbox) makes it easy to design flexible, responsive layout structures without using floats or positioning hacks.
Core Flexbox Properties:
display: flex;: Establishes a flex containerjustify-content: Aligns items along the main axis (center, space-between, space-around)align-items: Aligns items along the cross axisflex-direction: Sets row or column alignment
css Example
.card-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 30px;
background-color: #f4f4f4;
}
.card {
flex: 1;
background: #ffffff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}