CSS 101: Flexbox

CSS Flexbox is a powerful layout model that allows you to design complex layouts with ease. In this post, we will explore the fundamentals of Flexbox and how you can use it to create flexible and responsive designs.

What is Flexbox?

Flexbox, short for "Flexible Box," is a one-dimensional layout model that simplifies the alignment and distribution of space among items in a container. It is particularly useful for building layouts when the size of your items is unknown or dynamic.

Flex Container and Flex Items

In Flexbox, there are two primary components:

Flex Container: This is the parent element that contains one or more flex items. By setting the display property of an element to flex or inline-flex, you create a flex container.
Flex Items: These are the child elements within the flex container. Flex items are laid out along the main axis or the cross axis, depending on the flex container's orientation.

Main Concepts

Flexbox introduces several key concepts:

1. Flex Direction

In CSS, the flex-direction property is used to control the direction in which flex items are laid out within a flex container. It defines the main axis along which the items are positioned. Here are the possible values for flex-direction:

row: This is the default value. Items are laid out in a horizontal line from left to right.
row-reverse: Items are laid out in a horizontal line from right to left.
column: Items are laid out in a vertical line from top to bottom.
column-reverse: Items are laid out in a vertical line from bottom to top.

Here's an example of how to use flex-direction in CSS:

.parent {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse;
}

2. Main Axis and Cross Axis

Flex layouts are based on two axes:

Main Axis: The primary axis along which flex items are laid out. It is determined by the flex-direction property, which can be set to row, row-reverse, column, or column-reverse.
Cross Axis: The perpendicular axis to the main axis. It is used for alignment and is based on the opposite direction of the main axis.

On above example, flexbox-direction is set to row, therefore setting the main axis direction to horizontal, and the cross axis is vertical. If we change the flex-direction to column, the main axis will be vertical, and the cross axis will be horizontal, while the reverse attribute will only change the direction of the axis (left to right, top to bottom)

3. Justify Content and Align Items

Justify Content: Determines how extra space is distributed along the main axis. Common values include flex-start, flex-end, center, space-between, and space-around. explain further
Align Items: Defines how items are aligned along the cross axis. It supports values like flex-start, flex-end, center, stretch, and baseline. explain further

4. Flex Properties

Flex items have several properties that control their behavior:

flex-grow: Specifies the ability of a flex item to grow relative to other items.
flex-shrink: Specifies the ability of a flex item to shrink relative to other items.
flex-basis: Sets the initial size of a flex item.
flex: A shorthand property to set flex-grow, flex-shrink, and flex-basis in one declaration.

Cheat Sheet

.parent {
  display: flex | inline-flex;
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  align-items: flex-start | flex-end | center | baseline | stretch;
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
 
.child {
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
  flex: 1 1 auto;
  align-self: auto | flex-start;
}

Parent Element Properties

display

Values: flex | inline-flex Description: Defines whether the container is a flex container (flex) or an inline-level flex container (inline-flex).

flex-direction

Values: row| row-reverse | column | column-reverse Description: Specifies the direction in which items are placed inside the container. Options include row, row-reverse, column, and column-reverse.

flex-wrap

Values: nowrap | wrap | wrap-reverse Description: Controls whether items should wrap onto multiple lines when there isn't enough space. Options include nowrap, wrap, and wrap-reverse.

justify-content

align-items

Values: flex-start | flex-end | center | baseline | stretch Description: Aligns items along the cross-axis. Options include flex-start, flex-end, center, baseline, and stretch.

align-content

Values: flex-start | flex-end | center | space-between | space-around | stretch Description: Aligns lines of items in the container when there's extra space on the cross-axis. Options include flex-start, flex-end, center, space-between, space-around, and stretch.

Child Element Properties

order

Values: int Description: Specifies the order of a flex item within a container using integer values.

flex-grow

Values: int Description: Determines how much a flex item should grow relative to others, accepting numeric values.

flex-shrink

Values: int Description: Specifies how much a flex item should shrink if there isn't enough space, accepting numeric values.

flex-basis

Values: Size values (e.g., 100px, 50%, auto) Description: Sets the initial size of a flex item before it flexes. Options include size values like 100px, 50%, and auto.

flex

Values: Shorthand property for flex-grow, flex-shrink, and flex-basis (e.g., 1 1 auto) Description: A shorthand property for defining how a flex item should grow, shrink, and its initial size.

align-self

Values: auto | flex-start Description: Overrides the alignment specified by the parent for an individual flex item. Options include auto and flex-start. These descriptions provide an overview of Flexbox properties for both parent and child elements, making it easier to understand how they affect the layout of flex containers and their items.

Use Cases

Flexbox is a versatile CSS layout model that can be used to create a variety of layouts. Here are some examples of how you can use Flexbox for different layout scenarios:

Description: Use Flexbox to create a responsive navigation bar that adapts to different screen sizes. Align navigation items horizontally on larger screens and stack them vertically on smaller screens.

2. Equal Height Columns

Description: Achieve equal-height columns in a row, regardless of the content's height. Flexbox allows columns to automatically adjust their height to match the tallest column in the row.

3. Vertical Centering

Description: Vertically center content within a container, both horizontally and vertically. Flexbox simplifies the task of centering elements, making it ideal for things like login forms and modals.

4. Masonry Grid Layout

Description: Create a masonry grid layout where items of varying heights are positioned optimally, resembling a Pinterest-style grid. Flexbox can help achieve this dynamic layout.

5. Flexible Card Layout

Description: Design a flexible card layout where cards automatically adjust their width and height based on available space. Flexbox makes it easy to create responsive card grids.

6. Sidebar and Content Layout

Description: Construct a sidebar and content layout with a fixed sidebar width and flexible content area. Flexbox enables precise control over the layout of these elements.

7. Distributed Space

Description: Distribute space evenly among elements, such as buttons or navigation links, by using the justify-content: space-between; property. This creates consistent spacing between items.

8. Carousel

Description: Implement a carousel or slider component with Flexbox to arrange and display items horizontally. Flexbox can assist in centering the current item within the viewport.

Description: Keep the footer at the bottom of the page, even when there's not enough content. Flexbox can help push the footer to the bottom of the viewport.

10. Responsive Form Layout

Description: Design responsive forms that adapt to various screen sizes, ensuring that form elements are easy to use on both desktop and mobile devices.

These use cases demonstrate the flexibility and power of Flexbox for creating a wide range of layouts, from navigation bars to complex grid systems, while maintaining responsiveness and adaptability.