If you're just starting out with web development and design, mastering CSS layout is essential. When I first started web development, we used techniques like floats and clearing for positioning, this was hacky and error-prone and we had to implement all sorts of browser hacks to get things working across all browsers - this was an art in itself... dark dark days!

Flexbox is a modern CSS layout module that makes it easier to design flexible, responsive layouts. Here's an introduction to the basics of flexbox, just some basics, but it's made front-end dev a much nicer place to be.

What is Flexbox?

Flexbox is short for the Flexible Box Layout Module. It's a CSS layout mode that allows you to easily control the layout of elements within a container. Flexbox is designed to help distribute space and align items in an optimal way based on their size. This makes it ideal for creating responsive layouts that adapt to different screen sizes.

Flexbox Container

To use flexbox, you first need to define a flex container. This is done by setting the display property of the parent element to flex or inline-flex. Any direct child elements of this container then become flex items.

.container {
  display: flex; /* Or inline-flex */
}

Flex Direction

By default, flex items are laid out in a row. But you can change the direction using the flex-direction property on the flex container. This allows you to stack items vertically in a column instead.

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

Distributing Extra Space

One of the main advantages of flexbox is how it distributes space between flex items. The justify-content property controls how the items are spaced out along the main axis (horizontally for rows, vertically for columns).

.container {
 justify-content: flex-start; /* flex-start | flex-end | center | space-around | space-between */
}

Aligning Items

While justify-content deals with the main axis, the align-items property is used to align flex items along the cross axis (vertically for rows, horizontally for columns).

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

Flexible Items

Flex items themselves can be made flexible using the flex shorthand property. This defines how an item should grow, shrink, or be positioned.

.item {
  flex: 1; /* flex-grow flex-shrink flex-basis */
}

Setting flex-grow to a non-zero value allows an item to grow and take up remaining space. flex-shrink controls whether items can shrink below their initial size to fit the container. And flex-basis sets the initial size of a flex item.

Ordering and Alignment

You can also change the visual order of flex items using the order property. Items are rendered in ascending order based on this value.

.item:nth-child(1) {
  order: 3;
}
.item:nth-child(2) {
  order: 1; 
}
.item:nth-child(3) {
  order: 2;
}

Additionally, individual flex items can override their alignment using the align-self property.

.item {
  align-self: flex-start; /* flex-start | flex-end | center | baseline | stretch */
}

Wrapping Items

By default, all flex items try to fit onto a single line inside the container. To allow items to wrap to multiple lines, set flex-wrap on the container.

.container {
  flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
}

This behavior can be combined with properties like flex-direction, justify-content and align-items to achieve different layout effects.

Flexbox makes creating 2d layouts a breeze and is a joy to work with, just ask any web developer who's had to build websites using floats! it's an essential skill for any modern web developer to master!