Prev Next

CSS Flex Items

Flex items are the children of a flex container. They align and distribute themselves based on the properties applied to the container and the items themselves. Flex items can grow, shrink, and adjust their size using specific flex properties.

Key Topics

Flex Grow

The flex-grow property defines how much a flex item will grow relative to the rest of the items in the container. A value of 1 allows the item to grow and share available space equally, while 0 prevents it from growing.

<style>
        .flex-container {
            display: flex;
            background-color: #F0F0F0;
        }
        .flex-item-1 {
            flex-grow: 1;
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
        }
        .flex-item-2 {
            flex-grow: 2;
            background-color: #28A745;
            color: white;
            padding: 20px;
            margin: 5px;
        }
</style>
<div class="flex-container">
    <div class="flex-item-1">Grow 1</div>
    <div class="flex-item-2">Grow 2</div>
</div>

Explanation: The second item grows twice as much as the first item because its flex-grow value is 2.

Flex Shrink

The flex-shrink property determines how much a flex item will shrink relative to the other items when the container has insufficient space. A value of 1 allows shrinking, while 0 prevents it from shrinking.

<style>
        .flex-container {
            display: flex;
            width: 300px;
            background-color: #F0F0F0;
        }
        .flex-item-1 {
            flex-shrink: 1;
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
        }
        .flex-item-2 {
            flex-shrink: 0;
            background-color: #28A745;
            color: white;
            padding: 20px;
            margin: 5px;
        }
</style>
<div class="flex-container">
    <div class="flex-item-1">Shrink 1</div>
    <div class="flex-item-2">No Shrink</div>
</div>

Explanation: The first item shrinks when there isn’t enough space, while the second item maintains its size.

Flex Basis

The flex-basis property specifies the initial size of a flex item before any growing or shrinking occurs.

<style>
        .flex-container {
            display: flex;
            background-color: #F0F0F0;
        }
        .flex-item-1 {
            flex-basis: 100px;
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
        }
        .flex-item-2 {
            flex-basis: 200px;
            background-color: #28A745;
            color: white;
            padding: 20px;
            margin: 5px;
        }
</style>
<div class="flex-container">
    <div class="flex-item-1">Basis 100px</div>
    <div class="flex-item-2">Basis 200px</div>
</div>

Explanation: The flex items are initially set to their specified basis sizes before any adjustments.

Order

The order property controls the order in which flex items are displayed, without changing the HTML structure.

<style>
        .flex-container {
            display: flex;
            background-color: #F0F0F0;
        }
        .flex-item-1 {
            order: 2;
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
        }
        .flex-item-2 {
            order: 1;
            background-color: #28A745;
            color: white;
            padding: 20px;
            margin: 5px;
        }
</style>
<div class="flex-container">
    <div class="flex-item-1">Item 2 (Order 2)</div>
    <div class="flex-item-2">Item 1 (Order 1)</div>
</div>

Explanation: The items are displayed based on their order values, regardless of their HTML order.

Align Self

The align-self property allows individual items to override the container’s align-items property for alignment on the cross axis.

<style>
        .flex-container {
            display: flex;
            align-items: center;
            height: 200px;
            background-color: #F0F0F0;
        }
        .flex-item-1 {
            align-self: flex-start;
            background-color: #007BFF;
            color: white;
            padding: 20px;
            margin: 5px;
        }
        .flex-item-2 {
            align-self: flex-end;
            background-color: #28A745;
            color: white;
            padding: 20px;
            margin: 5px;
        }
</style>
<div class="flex-container">
    <div class="flex-item-1">Align Start</div>
    <div class="flex-item-2">Align End</div>
</div>

Explanation: Individual items are aligned differently along the cross axis using align-self.

Key Takeaways

  • Flex Grow: Controls how much an item grows relative to others.
  • Flex Shrink: Controls how much an item shrinks when space is limited.
  • Flex Basis: Sets the initial size of an item.
  • Order: Alters the visual order of items without changing the HTML structure.
  • Align Self: Allows individual items to override alignment.
Prev Next