The Power of Flexibility: Introduction to CSS Flexbox
Unlock the power of modern CSS to build flexible, responsive, and robust layouts with ease using the Flexbox model.
Welcome! Let's learn to build layouts effortlessly with CSS Flexbox.
The Flex Container & Items
Flexbox begins with the parent element, the **flex container**. By setting its display property to flex, you activate the flexbox layout model for its direct children, which become **flex items**.
Main Axis Alignment with 'justify-content'
The justify-content property aligns flex items along the **main axis** (horizontally by default). Common values include flex-start (default), center, flex-end, space-between, and space-around.
Cross Axis Alignment with 'align-items'
To align items along the **cross axis** (vertically by default), use align-items. You can use values like stretch (default), flex-start, center, and flex-end to control their vertical position.
Creating Flexibility with 'flex-grow'
The flex-grow property allows a flex item to grow and take up available space. A value of 1 tells it to take up an equal share of the extra space. This is key for creating responsive layouts.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
.container { display: ; align-items: ; }
Practice Example: Code Editor
Use Flexbox to center the three boxes horizontally and vertically within the container.
Basic Flexbox Concepts
| Concept | Description |
|---|---|
| display: flex; | Activates the Flexbox model on the container. |
| flex-direction | Defines the direction in which the flex items are distributed. |
| justify-content | Controls the alignment of flex items along the main axis. |
| align-items | Controls the alignment of flex items along the cross axis. |
| flex-wrap | Determines whether flex items should wrap or not. |
| flex-grow | Allows a flex item to grow in proportion to the available space. |
* Write your CSS code and apply it to see the results.
Results:
Practical Flexbox Layouts
Flexbox simplifies complex layout tasks that were once difficult. Let's explore some common, real-world patterns you can build with it.
1. Perfect Centering
Centering an element both horizontally and vertically is trivial with Flexbox. Just two properties on the parent container are all you need.
.container {
display: flex;
justify-content: center;
align-items: center;
}2. Responsive Card Grid
By adding flex-wrap: wrap, flex items will wrap onto new lines when they run out of space, creating a responsive grid without media queries.
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}3. Sticky Footer
Flexbox can easily solve the "sticky footer" problem, where the footer stays at the bottom of the page, even on pages with little content.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}Practical Takeaway: Start with `display: flex`. Then use `justify-content` for main-axis alignment and `align-items` for cross-axis alignment. These three properties will solve 90% of your layout problems.