Logo
Tutorials Articles Code Playground
Sign In Get Started
Module: CSS Layout

Flexbox

CSS Layout: Flexbox

Flexbox (Flexible Box Layout) is a powerful one-dimensional layout model for arranging items in a row or column. It's designed for dynamic and responsive layouts, making it easier to align and distribute space among items in a container, even when their size is unknown or varying.

Core Concepts

  • Flex Container: The parent element that holds the flex items. You define it using display: flex; or display: inline-flex;.
  • Flex Items: The direct children of the flex container. These are the elements that are laid out using flexbox.
  • Main Axis: The primary direction in which flex items are laid out. This is determined by the flex-direction property.
  • Cross Axis: The axis perpendicular to the main axis.

Basic Properties

1. Container Properties: These are applied to the flex container.

  • flex-direction: Defines the direction of the main axis.

    • row (default): Items are laid out horizontally, left to right.
    • row-reverse: Items are laid out horizontally, right to left.
    • column: Items are laid out vertically, top to bottom.
    • column-reverse: Items are laid out vertically, bottom to top.

  • flex-wrap: Controls whether flex items should wrap onto multiple lines if they overflow the container.

    • nowrap (default): Items will not wrap. The container will shrink if necessary.
    • wrap: Items will wrap onto multiple lines.
    • wrap-reverse: Items will wrap onto multiple lines in reverse order.

  • flex-flow: Shorthand for flex-direction and flex-wrap. e.g., flex-flow: row wrap;

  • justify-content: Defines how flex items are aligned along the main axis.

    • flex-start (default): Items are packed towards the start of the main axis.
    • flex-end: Items are packed towards the end of the main axis.
    • center: Items are centered along the main axis.
    • space-between: Items are evenly distributed along the main axis, with the first item at the start and the last item at the end.
    • space-around: Items are evenly distributed along the main axis, with equal space around each item.
    • space-evenly: Items are evenly distributed along the main axis, with equal space between each item and the container edges.

  • align-items: Defines how flex items are aligned along the cross axis.

    • stretch (default): Items stretch to fill the container's height.
    • flex-start: Items are aligned to the start of the cross axis.
    • flex-end: Items are aligned to the end of the cross axis.
    • center: Items are centered along the cross axis.
    • baseline: Items are aligned based on their text baseline.

  • align-content: Controls the alignment of flex lines when there is extra space in the cross axis (only works when flex-wrap is used). Similar values to justify-content.

2. Item Properties: These are applied to the flex items.

  • order: Controls the order in which flex items appear in the flex container. Items with lower order values appear earlier.
  • flex-grow: Defines the ability of a flex item to grow if there is available space in the flex container. Takes a number as a value. Higher values mean the item will grow more.
  • flex-shrink: Defines the ability of a flex item to shrink if there is not enough space in the flex container. Takes a number as a value. Higher values mean the item will shrink more.
  • flex-basis: Specifies the initial main size of a flex item. Can be a length (e.g., 100px), a percentage, or auto. auto means the item's size is based on its content.
  • flex: Shorthand for flex-grow, flex-shrink, and flex-basis. e.g., flex: 1 1 auto; (common shorthand for equal distribution of space).
  • align-self: Overrides the align-items property for a single flex item. Uses the same values as align-items.

Example

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

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}

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

This example creates a flex container with three items, arranged horizontally, centered both horizontally and vertically, and with a light gray background. Each item has a light blue background and some padding.

Common Use Cases

  • Navigation Bars: Creating responsive navigation menus.
  • Equal Height Columns: Making columns in a layout the same height.
  • Centering Elements: Easily centering elements both horizontally and vertically.
  • Responsive Grids: Building flexible grid layouts that adapt to different screen sizes.
  • Reordering Elements: Changing the order of elements without modifying the HTML source.

Resources