Getting Started with CSS Flexbox

1. Flex Layout Basics

Flex (Flexible Box Layout) is a powerful and commonly used layout method that makes it easy to align elements, adjust spacing, and create responsive designs. Below, I’ll start from the basics, introduce common techniques, and end with a simple example for practice.

Basic Concepts

  • Flex Container: The element with display: flex applied.
  • Flex Items: The direct child elements inside the container.
  • Main Axis: The default horizontal direction, determining the primary arrangement of Flex items.
  • Cross Axis: The direction perpendicular to the main axis.

Enabling Flex

1
2
3
.container {
  display: flex;
}

With this, all direct child elements of .container become Flex items, arranged horizontally by default.

2. Common Flex Properties

Flex layout is divided into container properties (applied to the parent element) and item properties (applied to the child elements). I’ll cover the most commonly used ones first.

Container Properties

  1. flex-direction: Defines the main axis direction

    • row (default): Horizontal, left to right
    • row-reverse: Horizontal, right to left
    • column: Vertical, top to bottom
    • column-reverse: Vertical, bottom to top
      1
      2
      3
      4
      .container {
        display: flex;
        flex-direction: column;
      }

  2. justify-content: Alignment along the main axis

    • flex-start: Align to the start
    • flex-end: Align to the end
    • center: Center alignment
    • space-between: Justify with equal space between items
    • space-around: Equal space around each item
      1
      2
      3
      4
      .container {
        display: flex;
        justify-content: space-between;
      }

  3. align-items: Alignment along the cross axis

    • flex-start: Align to the start of the cross axis
    • flex-end: Align to the end of the cross axis
    • center: Center alignment
    • stretch (default): Stretch to fill the cross axis
      1
      2
      3
      4
      .container {
        display: flex;
        align-items: center;
      }

  4. flex-wrap: Whether items wrap to a new line

    • nowrap (default): No wrapping, items shrink to fit
    • wrap: Wrap to the next line
    • wrap-reverse: Wrap and reverse the order
      1
      2
      3
      4
      .container {
        display: flex;
        flex-wrap: wrap;
      }

Item Properties

  1. flex-grow: How items distribute extra space

    • Default is 0, meaning no extra space is taken.
    • Set to 1 to evenly distribute remaining space.
      1
      2
      3
      .item {
        flex-grow: 1;
      }

  2. flex-shrink: How items shrink when space is limited

    • Default is 1, allowing items to shrink.
    • Set to 0 to prevent shrinking.
      1
      2
      3
      .item {
        flex-shrink: 0;
      }

  3. flex-basis: Initial size of an item

    • Can be a specific value (e.g., 200px) or auto.
      1
      2
      3
      .item {
        flex-basis: 200px;
      }

  4. flex: Shorthand for flex-grow, flex-shrink, and flex-basis

    • Common usage: flex: 1 (equivalent to flex: 1 1 0%).
      1
      2
      3
      .item {
        flex: 1;
      }

3. Simple Practice Example

Let’s create a basic navigation bar using Flexbox to achieve horizontal alignment, centered items, and even distribution.

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="nav">
        <div class="nav-item">首页</div>
        <div class="nav-item">关于</div>
        <div class="nav-item">服务</div>
        <div class="nav-item">联系</div>
      </div>
</body>
</html>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: cadetblue;
    height: 60px;
    color: white;
}

.nav-item {
    padding: 10px 20px;
}

.nav-item:hover {
    background-color: darkcyan;
}

Explanation of the Effect

  • The .nav container enables Flex, and its child elements (.nav-item) are arranged horizontally.
  • justify-content: space-around evenly distributes the navigation items.
  • align-items: center vertically centers the items.
  • Additional styles (like background color and hover effect) make it look more like a navigation bar.

4. Practice Suggestions

  1. Try changing flex-direction to column and see the result.

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.nav {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background-color: cadetblue;
    height: 200px;
    color: white;
}

.nav-item {
    padding: 10px 20px;
    flex: 1;
}

.nav-item:hover {
    background-color: darkcyan;
}

  1. Switch justify-content to flex-end or center and observe the changes.

flex-end

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: cadetblue;
    height: 60px;
    color: white;
}

.nav-item {
    padding: 10px 20px;
}

.nav-item:hover {
    background-color: darkcyan;
}

center

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: cadetblue;
    height: 60px;
    color: white;
}

.nav-item {
    padding: 10px 20px;
}

.nav-item:hover {
    background-color: darkcyan;
}

  1. Add flex-grow: 1 to a specific .nav-item and see how it takes up the remaining space.

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: cadetblue;
    height: 60px;
    color: white;
}

.nav-item {
    padding: 10px 20px;
    flex-grow: 1;
}

.nav-item:hover {
    background-color: darkcyan;
}

Flexbox becomes very intuitive with practice, and I recommend experimenting with different combinations. Feel free to ask me if you have any questions!

Getting Started with CSS Flexbox
https://www.hardyhu.cn/2024/11/27/Getting-Started-with-CSS-Flexbox/
Author
John Doe
Posted on
November 27, 2024
Licensed under