Skip to content
HTML&CSS

Introduction to Flexbox (1D Layout)

Welcome back! In our last session, we mastered the display property and various positioning techniques, giving us more control over element placement. Now, we’re going to introduce a truly game-changing layout module in CSS: Flexbox. Flexbox simplifies the arrangement of items in a single dimension (either a row or a column), making it incredibly easy to align, distribute space, and order content.

Think of Flexbox as a powerful tool to arrange items neatly in a line, whether that line goes horizontally or vertically. It takes away much of the manual calculation and floating that used to be necessary for common layout patterns like navigation bars, product grids, or form elements.

What is Flexbox? For Arranging Items in a Single Row or Column

  • Purpose: Flexbox (or the Flexible Box Module) is a one-dimensional layout system. It allows you to distribute space among items in a container and align them, making it easy to build flexible and efficient layouts for single rows or columns.
  • Key Concept: Flexbox involves two main components:
    • Flex Container: The parent element on which you apply display: flex;. This container’s direct children become flex items.
    • Flex Items: The direct children of the flex container. These are the items that will be arranged.
  • Main Axis vs. Cross Axis: Flexbox works along two axes:
    • Main Axis: The primary direction along which flex items are laid out (either horizontal for rows, or vertical for columns).
    • Cross Axis: The axis perpendicular to the main axis.
  • Simple Words: Flexbox is a super-smart way to line up items either horizontally or vertically inside a container. You tell the parent box to be a “flex container,” and then all the items directly inside it become “flex items” that you can easily arrange.

Flex Container Properties: How to Control the Parent

These properties are applied to the parent element that has display: flex;.

display: flex;

  • Purpose: Initializes a flex container. Its direct children become flex items and are laid out using the flexbox model.
  • Example: 
    .container {
      display: flex;
      background-color: #f0f0f0;
      padding: 10px;
    }
  • Technical Detail: Setting display: flex; establishes a new flex formatting context for its direct children, turning them into flex items. This property changes how the container itself behaves in the normal flow (it becomes a block-level flex container) and how its children are laid out.
  • Simple Words: This is the magic switch you turn on for the main box that will hold your items. It tells that box, “Okay, arrange your children using Flexbox!”

flex-direction (row, column)

  • Purpose: Establishes the main-axis, thus defining the direction flex items are placed in the flex container.
  • Values:
    • row (default): Items are arranged horizontally, from left to right (or right to left in RTL languages).
    • row-reverse: Items are arranged horizontally, but in reverse order.
    • column: Items are arranged vertically, from top to bottom.
    • column-reverse: Items are arranged vertically, but in reverse order.
  • Example: 
    .container {
      display: flex;
      flex-direction: column; /* Items stack vertically */
    }
  • Technical Detail: flex-direction sets the direction of the main axis, which in turn determines the primary layout direction of the flex items. This property is fundamental for single-axis layout control.
  • Simple Words: Which way should your items line up? Horizontally (row) or vertically (column)?

justify-content (Alignment Along Main Axis)

  • Purpose: Aligns flex items along the main axis (the direction set by flex-direction). It controls how free space is distributed between and around items.
  • Values:
    • flex-start (default): Items are packed towards the start of the flex-direction.
    • flex-end: Items are packed towards the end of the flex-direction.
    • center: Items are centered along the main axis.
    • space-between: Items are evenly distributed; first item at the start, last item at the end.
    • space-around: Items are evenly distributed with space around them.
    • space-evenly: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.
  • Example: 
    .container {
      display: flex;
      justify-content: center; /* Centers items horizontally if flex-direction is row */
    }
  • Technical Detail: justify-content distributes free space left over when either all flex items are inflexible, or are flexible but have reached their maximum size. It also handles the alignment of items when they overflow the line.
  • Simple Words: How should the items be arranged along the main line? Do you want them at the start, end, center, or spread out with space in between or around them?

align-items (Alignment Along Cross Axis)

  • Purpose: Aligns flex items along the cross axis (perpendicular to flex-direction). It controls how items are aligned within their row/column.
  • Values:
    • stretch (default): Items stretch to fill the container along the cross axis (respecting min-height/max-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 on the cross axis.
    • baseline: Items are aligned such that their baselines align.
  • Example: 
    .container {
      display: flex;
      align-items: center; /* Centers items vertically if flex-direction is row */
      height: 200px; /* Needs height to see vertical alignment effect */
    }
  • Technical Detail: align-items sets the default alignment for items along the cross axis, relative to the flex container. It applies to all flex items within the container, affecting how they fit into the available space perpendicular to the flex-direction.
  • Simple Words: How should the items be aligned perpendicular to the main line? Should they stretch, sit at the top/bottom, or be perfectly centered?

flex-wrap

  • Purpose: By default, flex items try to fit onto a single line. flex-wrap allows items to wrap onto multiple lines when there isn’t enough space.
  • Values:
    • nowrap (default): All flex items will be on one line, potentially overflowing.
    • wrap: Items will wrap onto multiple lines from start to end.
    • wrap-reverse: Items will wrap onto multiple lines from end to start.
  • Example: 
    .container {
      display: flex;
      flex-wrap: wrap; /* Allows items to wrap to the next line */
      width: 300px; /* Container width */
    }
    .item {
      width: 100px; /* Items will wrap if total width exceeds 300px */
    }
  • Technical Detail: flex-wrap controls whether the flex container is a single-line or multi-line flex container. In a multi-line container, flex items can wrap to subsequent lines if the combined size of the flex items exceeds the size of the container along the main axis.
  • Simple Words: If your items are too big to fit on one line, flex-wrap tells them to go to the next line instead of overflowing.

align-content

  • Purpose: When flex items wrap onto multiple lines (flex-wrap: wrap;), align-content aligns those flex lines themselves within the container along the cross axis. This is similar to justify-content but for lines of items, not individual items.
  • Values: flex-start, flex-end, center, space-between, space-around, stretch (default).
  • Note: Only has an effect if flex-wrap: wrap; is active and there’s extra space on the cross axis.
  • Technical Detail: align-content distributes space between and around flex lines in a multi-line flex container along the cross axis. It governs how the lines themselves are spaced, which contrasts with align-items that aligns items within a single line.
  • Simple Words: If your items wrap onto multiple rows, align-content controls how those rows themselves are spaced and aligned within the container (like aligning the rows to the top, bottom, or spacing them out).

Flex Item Properties: How to Control the Children

These properties are applied to the individual flex items (the direct children of the flex container).

flex-grow, flex-shrink, flex-basis (Flex Shorthand)

These three properties control how a flex item grows, shrinks, and its initial size. They are often combined into the flex shorthand property.

  • flex-grow:

    • Purpose: Specifies how much a flex item will grow relative to the rest of the flex items in the container when there’s extra free space. A value of 1 means it will take up 1 portion of the available extra space. 0 (default) means it won’t grow.
    • Example: flex-grow: 1;

  • flex-shrink:

    • Purpose: Specifies how much a flex item will shrink relative to the rest of the flex items when there’s not enough space in the container. 1 (default) means it will shrink if necessary. 0 means it won’t shrink below its flex-basis size.
    • Example: flex-shrink: 0;

  • flex-basis:

    • Purpose: Defines the default size of a flex item before any remaining space is distributed. It’s like setting an initial width or height along the main axis.
    • Example: flex-basis: 100px;, flex-basis: auto; (default, based on content size)

  • flex Shorthand: Combines flex-grow, flex-shrink, and flex-basis in that order.

    • Example:
      • flex: 1 1 auto; (grow, shrink, initial size auto)
      • flex: 1; (common shorthand for flex: 1 1 0%; - grow, shrink, initial size 0, then distribute)
      • flex: none; (flex: 0 0 auto; - don’t grow, don’t shrink, size based on content)

  • Technical Detail: flex-grow, flex-shrink, and flex-basis define the flexibility of a flex item. flex-basis sets the initial main size. flex-grow determines how extra space is distributed. flex-shrink determines how space is removed during shrinking. The flex shorthand is the recommended way to use these properties as it ensures consistency.

  • Simple Words: These control how flexible each item is:

    • flex-grow: How much it stretches to fill empty space.
    • flex-shrink: How much it squishes if there’s not enough space.
    • flex-basis: What its starting size should be.
    • flex is a shortcut to set all three at once. flex: 1; is very common and means “grow and shrink as needed, starting with no fixed size.”

order

  • Purpose: Specifies the order in which flex items are displayed, overriding their order in the HTML source.
  • Value: An integer (default is 0). Items with lower order values appear first.
  • Example:
    Item 1
    Item 2
    Item 3
     
    <div class="container">
      <div class="item" style="order: 2;">Item 1</div>
      <div class="item" style="order: 1;">Item 2</div>
      <div class="item" style="order: 3;">Item 3</div>
    </div>
    (Result: Item 2, Item 1, Item 3)
  • Technical Detail: The order property controls the logical and visual order of flex items. Items are laid out in ascending order of their order value, and then by their source order for items with the same order value. This affects the visual presentation but not the DOM order, which is important for accessibility and SEO.
  • Simple Words: You can tell a specific item to appear earlier or later in the line, even if it’s placed differently in your HTML code.

align-self

  • Purpose: Allows individual flex items to override the align-items property set on the flex container, aligning themselves along the cross axis.
  • Values: auto (default, follows container’s align-items), flex-start, flex-end, center, baseline, stretch.
  • Example: 
    .container {
      display: flex;
      align-items: center; /* All items are centered vertically */
      height: 150px;
    }
    .item-tall {
      align-self: flex-end; /* This specific item moves to the bottom */
    }
  • Technical Detail: align-self applies to a single flex item, overriding the align-items property set on its parent flex container. It provides fine-grained control over the cross-axis alignment of individual items.
  • Simple Words: You can tell one specific item to align differently (top, bottom, center) than all the other items in the flex container.

Simple Examples with Flexbox

Centering a Div (Vertically and Horizontally)

One of Flexbox’s most famous tricks:

.container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  height: 300px; /* Container needs height to see vertical centering */
  border: 2px solid grey;
}
.centered-div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}
 
<div class="container">
  <div class="centered-div"></div>
</div>

Easy to create a horizontal navigation bar with even spacing:

.navbar {
  display: flex;
  justify-content: space-around; /* Distributes space evenly between items */
  background-color: #333;
  padding: 10px;
}
.navbar a {
  color: white;
  text-decoration: none;
  padding: 5px 15px;
}
<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

Excellent work! You’ve just taken a massive leap in your layout skills by learning Flexbox. It’s a game-changer for one-dimensional alignments and distributions. In the next section, we’ll apply all our CSS knowledge to make our designs adapt beautifully to different screen sizes using Media Queries – the key to responsive design!

Next Step: Ready to make your websites look great on any device? Click here to go to the next section: Link to Section 2.6: Basic Responsiveness: Media Queries (Placeholder)