Controlling the Container: Flexbox Properties

Master the core CSS properties that turn a simple container into a powerful, flexible layout tool for modern web design.

Welcome! Let's explore how to create flexible layouts with CSS Flexbox.

/* Three simple boxes. */

Setting the Main Axis: flex-direction

The flex-direction property establishes the main axis, thus defining the direction flex items are placed in the flex container. Values include row (default), row-reverse, column, and column-reverse.

Aligning on the Main Axis: justify-content

justify-content is used to align flex items along the main axis. It helps distribute extra free space. Common values are flex-start, flex-end, center, space-between, space-around, and space-evenly.

Aligning on the Cross Axis: align-items

align-items aligns items along the cross axis (perpendicular to the main axis). Use values like stretch (default), flex-start, flex-end, center, and baseline to control vertical alignment in a row, or horizontal in a column.

Handling Overflow: flex-wrap & align-content

By default, flex items try to fit onto one line. The flex-wrap property (nowrap, wrap, wrap-reverse) allows items to wrap onto multiple lines. When wrapping occurs, align-content aligns the container's lines within the container.

Practice Zone

Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.

Arrastra las opciones:

align-items

flex-direction

Completa el código:

Defines the direction of the items.______: row;

Aligns items along the cross axis.______: center;

Unlock with Premium

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

.container {
  display: flex;
  : column;
  : center;
}

Unlock with Premium

Practice Example: Code Editor

Use Flexbox properties to center the three items both horizontally and vertically within the container. Then, space them out evenly.

CSS Container Properties

Property	Description
display: flex;	Defines a flexible container.
flex-direction: row;	Places child elements in a row.
flex-direction: column;	Places child elements in a column.
justify-content: center;	Centers child elements horizontally.
align-items: center;	Centers child elements vertically.
flex-wrap: wrap;	Allows child elements to wrap onto multiple lines.

* Write your CSS code and apply it to see the results.

Results:

Flexible container example

Unlock with Premium

Knowledge Check

Which property is used to align items along the main axis?

Unlock with Premium

← Previous Next →

Practical Flexbox Layouts

Flexbox isn't just for aligning a few items; it's the foundation of modern web layouts. Let's explore some common, real-world examples.

1. The Perfect Centering Trick

Centering an element both vertically and horizontally used to be complex. With Flexbox, it's trivial. This is perfect for modals, pop-ups, and hero content.

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Centered

2. Responsive Navigation Bar

Flexbox excels at creating navigation bars. Using justify-content: space-between;, you can easily push the logo to one side and the navigation links to the other.

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. Flexible Card Layouts

Create a grid of cards that wraps gracefully on smaller screens. flex-wrap: wrap; is the key. You can also use flex properties on the cards themselves to align their internal content.

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Card 1

Card 2

Card 3

Card 4

Practical Takeaway: Think in terms of axes. Master the relationship between flex-direction, justify-content (main axis), and align-items (cross axis), and you can build almost any one-dimensional layout you can imagine.