CSS Flexbox & Responsive Layouts — HTML5 & CSS3 Masterclass | CodingRider

6 min read CSS 223 views

Bookmark

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 container
justify-content: Aligns items along the main axis (center, space-between, space-around)
align-items: Aligns items along the cross axis
flex-direction: Sets row or column alignment

css Example

Run Code

.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);
}

Related Tutorials