DEV Community

Cover image for Beginner's Guide to CSS Flexbox
Vijay Kumar
Vijay Kumar

Posted on

Beginner's Guide to CSS Flexbox

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 */
}
Enter fullscreen mode Exit fullscreen mode

2. align-items

Aligns items along the cross axis.

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

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;
}
Enter fullscreen mode Exit fullscreen mode

4. align-content

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

.container {
  align-content: space-between;
}
Enter fullscreen mode Exit fullscreen mode

Child Item Properties

1. flex-grow

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

.item {
  flex-grow: 1;
}
Enter fullscreen mode Exit fullscreen mode

2. flex-shrink

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

.item {
  flex-shrink: 1;
}
Enter fullscreen mode Exit fullscreen mode

3. flex-basis

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

.item {
  flex-basis: 200px;
}
Enter fullscreen mode Exit fullscreen mode

4. flex

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

.item {
  flex: 1 1 200px;
}
Enter fullscreen mode Exit fullscreen mode

5. align-self

Overrides the align-items value for specific items.

.item {
  align-self: flex-end;
}
Enter fullscreen mode Exit fullscreen mode

Example: A Simple Flex Layout 

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.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;
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)