Beginner’s Guide to CSS Flexbox

Posted on by — No Comments ↓

If you’re new to web development, you might have heard the term “Flexbox” thrown around quite a bit. Flexbox, short for the Flexible Box Layout Module, is a powerful layout model in CSS that helps you design responsive and easy-to-manage web layouts. In this beginner-friendly guide, we’ll break down the basics of Flexbox and walk you through some examples.

What is Flexbox?

Flexbox is a layout model in CSS3 that arranges elements in a predictable way even when their size is dynamic or unknown. It works on a one-dimensional layout, either in a row (horizontal) or a column (vertical).

To use Flexbox, you set a container’s display property to flex: 

.container {
  display: flex;
}

This makes all direct child elements of .container flexible items that can be aligned and distributed within the container.

Main Axis vs Cross Axis

Understanding the main and cross axes is key to mastering Flexbox:

  • Main Axis: The primary axis along which items are laid out (default is row).
  • Cross Axis: Perpendicular to the main axis.

You can change the direction using: 

.container {
  flex-direction: row; /* default */
  /* or */
  flex-direction: column;
}

Core Properties of Flexbox

1. justify-content

Controls how items are distributed along the main axis. 

.container {
  justify-content: center; /* Other values: flex-start, flex-end, space-between, space-around, space-evenly */
}

2. align-items

Aligns items along the cross axis. 

.container {
  align-items: center; /* Other values: flex-start, flex-end, stretch, baseline */
}

3. flex-wrap

By default, items try to fit in one line. Use wrap to allow them to wrap onto multiple lines: 

.container {
  flex-wrap: wrap;
}

4. align-content

Controls the space between rows or columns when there is extra space. 

.container {
  align-content: space-between;
}

Child Item Properties

1. flex-grow

Specifies how much a flex item should grow relative to others. 

.item {
  flex-grow: 1;
}

2. flex-shrink

Specifies how items shrink when there’s not enough space. 

.item {
  flex-shrink: 1;
}

3. flex-basis

Defines the default size of an element before remaining space is distributed. 

.item {
  flex-basis: 200px;
}

4. flex

A shorthand for flex-grow, flex-shrink, and flex-basis. 

.item {
  flex: 1 1 200px;
}

5. align-self

Overrides the align-items value for specific items. 

.item {
  align-self: flex-end;
}

Example: A Simple Flex Layout

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
}

.item {
  background-color: lightblue;
  padding: 20px;
  margin: 10px;
  flex: 1;
  text-align: center;
}

Final Thoughts

Flexbox simplifies the task of building responsive layouts. It’s especially useful for aligning items, distributing space, and handling dynamic content sizes. Once you’re comfortable with Flexbox, you’ll find CSS layouts much easier to manage.

Practice regularly and experiment with different combinations to truly master it. Happy coding!

Leave a Reply