CSS Flexbox

The CSS Flexible Box Layout (Flexbox) is a layout model designed to create flexible and efficient layouts for user interfaces. It provides powerful tools to align and distribute items within a container, even when their sizes are dynamic or unknown.

Key Features of Flexbox

  1. Flexible Layouts: Dynamically adjust item sizes to fit available space.
  2. Alignment Control: Align items horizontally and vertically with ease.
  3. Reordering: Change the order of items without altering the HTML structure.
  4. One-Dimensional Layout: Works in a single direction (row or column).

Getting Started with Flexbox

HTML Structure:

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

Basic CSS:

.flex-container {
    display: flex;
    background-color: lightgray;
    padding: 10px;
}

.flex-item {
    background-color: cornflowerblue;
    color: white;
    padding: 20px;
    margin: 5px;
    text-align: center;
}

Flexbox Properties

1. Container Properties

The parent container controls how its children are laid out.

display: flex

  • Turns the container into a flex container.

flex-direction

  • Defines the direction of items in the container.
.flex-container {
    flex-direction: row; /* Default: items go left to right */
}

Values:

  • row: Items arranged horizontally (default).
  • row-reverse: Items arranged horizontally in reverse order.
  • column: Items arranged vertically (top to bottom).
  • column-reverse: Items arranged vertically in reverse order.

justify-content

  • Aligns items horizontally within the container.
.flex-container {
    justify-content: space-around;
}

Values:

  • flex-start: Items align at the start (default).
  • flex-end: Items align at the end.
  • center: Items align at the center.
  • space-between: Equal space between items.
  • space-around: Equal space around items.

align-items

  • Aligns items vertically within the container.
.flex-container {
    align-items: center;
}

Values:

  • stretch: Items stretch to fill the container (default).
  • flex-start: Items align at the top.
  • flex-end: Items align at the bottom.
  • center: Items align in the center.
  • baseline: Items align based on their text baselines.

align-content

  • Aligns a multi-line flex container’s rows.
.flex-container {
    flex-wrap: wrap;
    align-content: space-between;
}

Values:

  • flex-start: Rows align at the top.
  • flex-end: Rows align at the bottom.
  • center: Rows align at the center.
  • space-between: Equal space between rows.
  • space-around: Equal space around rows.
  • stretch: Rows stretch to fill the container (default).

flex-wrap

  • Controls whether items wrap to the next line if they exceed the container width.
.flex-container {
    flex-wrap: wrap;
}

Values:

  • nowrap: All items stay on a single line (default).
  • wrap: Items wrap onto multiple lines.
  • wrap-reverse: Items wrap in reverse order.

2. Item Properties

Each flex item can have individual properties for flexibility and alignment.

flex

  • A shorthand for setting flex-grow, flex-shrink, and flex-basis.
.flex-item {
    flex: 1; /* All items grow equally */
}

order

  • Changes the visual order of items.
.flex-item {
    order: 2; /* Higher numbers appear later */
}

align-self

  • Overrides align-items for an individual item.
.flex-item {
    align-self: flex-end;
}

Values:

  • auto: Inherits the parent’s align-items.
  • flex-start, flex-end, center, baseline, stretch: Same as align-items.

Practical Examples

1. Horizontal Centering

Center items both horizontally and vertically.

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
}

2. Responsive Navigation Bar

<div class="navbar">
    <div>Home</div>
    <div>About</div>
    <div>Contact</div>
</div>
.navbar {
    display: flex;
    justify-content: space-around;
    background-color: #333;
    color: white;
    padding: 10px;
}

3. Card Layout

<div class="card-container">
    <div class="card">Card 1</div>
    <div class="card">Card 2</div>
    <div class="card">Card 3</div>
</div>
.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    flex: 1 1 calc(30% - 20px); /* Flexible width with a gap */
    background: lightblue;
    padding: 20px;
}

4. Equal Height Columns

<div class="columns">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
</div>
.columns {
    display: flex;
    align-items: stretch;
}

.column {
    flex: 1;
    background: lightcoral;
    margin: 5px;
}

Browser Support

Flexbox is supported by all modern browsers. Ensure prefixes for older versions if necessary, like:

display: -webkit-flex;
display: -ms-flexbox;
display: flex;

Conclusion

CSS Flexbox is an invaluable tool for creating dynamic and responsive web layouts. With properties to control alignment, spacing, and order, Flexbox simplifies the task of designing modern, user-friendly websites.

For more CSS tutorials and examples, visit The Coding College!

Leave a Comment