CSS Flexbox

 

Flexbox, or the Flexible Box Layout, is a CSS layout module that provides a more efficient way to design flexible and responsive layout structures. It allows you to align and distribute space among items within a container, even when their sizes are unknown or dynamic.

Key Concepts of Flexbox

  • Flex Container:
    The parent element that holds flex items. You make an element a flex container by setting its display property to flex or inline-flex.

     

  • Flex Items:
    The child elements within the flex container. These items can be laid out in any direction, with flexible sizing and spacing.

 
Flex Container Properties

Flex container properties are CSS properties applied to the container element that has display: flex or display: inline-flex

These properties determine how the flex items inside the container are laid out. Below are all the key flex container properties:

1. display

  • Purpose: Defines the container as a flex container.

     

  • Values:
    • flex: Creates a block-level flex container.
    • inline-flex: Creates an inline-level flex container.


       

2. flex-direction

  • Purpose: Specifies the direction in which the flex items are placed in the flex container.

     

  • Values:
    • row (default): Left to right in a horizontal direction.
    • row-reverse: Right to left in a horizontal direction.
    • column: Top to bottom in a vertical direction.
    • column-reverse: Bottom to top in a vertical direction.

 

3. flex-wrap

  • Purpose: Controls whether the flex items should wrap onto multiple lines within the container.
  • Values:
    • nowrap (default): All items are placed on a single line.
    • wrap: Items wrap onto multiple lines, top to bottom.
    • wrap-reverse: Items wrap onto multiple lines, bottom to top.

       

       

4. flex-flow

  • Purpose: Shorthand property for setting both flex-direction and flex-wrap.
  • Values:
    • Example flex-flow: row wrap;

       

5. justify-content

  • Purpose: Aligns the flex items along the main axis (horizontal by default).
  • Values:
    • flex-start (default): Items are packed at the start of the main axis.
    • flex-end: Items are packed at the end of the main axis.
    • center: Items are centered along the main axis.
    • space-between: Items are evenly distributed, with the first item at the start and the last item at the end.
    • space-around: Items are evenly distributed with equal space around them.
    • space-evenly: Items are evenly distributed with equal space between and around them.

       

 

6. align-items

  • Purpose: Aligns the flex items along the cross axis (vertical by default).
  • Values:
    • stretch (default): Items stretch to fill the container.
    • flex-start: Items are aligned at the start of the cross axis.
    • flex-end: Items are aligned at the end of the cross axis.
    • center: Items are centered along the cross axis.
    • baseline: Items are aligned based on their baseline.

       

 

7. align-content

  • Purpose: Aligns the flex lines when there is extra space in the cross axis. It only applies when there are multiple lines of items (when flex-wrap is used).
  • Values:
    • stretch (default): Lines stretch to fill the container.
    • flex-start: Lines are packed at the start of the cross axis.
    • flex-end: Lines are packed at the end of the cross axis.
    • center: Lines are centered in the cross axis.
    • space-between: Lines are evenly distributed with the first line at the start and the last line at the end.
    • space-around: Lines are evenly distributed with equal space around them.
    • space-evenly: Lines are evenly distributed with equal space between and around them.

       

 

8. gap

  • Purpose: Controls the spacing between flex items.
  • Values:
    • gap: <length>: Specifies the gap between rows and columns of flex items.
    • row-gap: <length>: Specifies the gap between rows of flex items.
    • column-gap: <length>: Specifies the gap between columns of flex items.

       

Flex-item Properties

Flex-item properties are CSS properties that are applied to the individual child elements (flex items) within a flex container. These properties control how each item behaves and is sized within the flex container. Below are the key flex-item properties:

1. order

  • Purpose: Controls the order in which flex items appear within the flex container.
  • Values:
    • 0 (default): The default order.
    • Any positive or negative integer: Items with lower numbers appear first.

       

 
2. flex-grow
  • Purpose: Defines the ability of a flex item to grow relative to the other flex items when there is extra space available.
  • Values:
    • 0 (default): The item will not grow.
    • A positive number (e.g.,1,2  etc.): The item will grow to fill the available space proportionally based on the number.

       

 
3. flex-shrink
  • Purpose: Defines the ability of a flex item to shrink relative to the other flex items when there is not enough space in the container.
  • Values:
    • 1 (default): The item will shrink if necessary.
    • 0: The item will not shrink.
    • A positive number: The item will shrink proportionally based on the number.

       

 
4. flex-basis
  • Purpose: Defines the initial main size of a flex item before any growing or shrinking. This can be seen as the base size of the item.
  • Values:
    • auto (default): The size is determined by the content or the item’s width/height.
    • A length value (e.g., 100px, 20% etc.): Specifies the initial size of the item.

       

 
5. flex
  • Purpose: Shorthand property for setting flex-grow, flex-shrink, and flex-basis together.
  • Values:
    • The default is 0 1 auto
    • Example:flex:1 0 100px; (This item can grow but will not shrink, and its initial size is 100px).

       

 
6. align-self
  • Purpose: Overrides the container’s align-items property for individual flex items, allowing for different alignment for specific items.
  • Values:

    • auto (default): Inherits the align-items value from the flex container.
    • flex-start: Aligns the item at the start of the cross axis.
    • flex-end: Aligns the item at the end of the cross axis.
    • center: Aligns the item in the center of the cross axis.
    • baseline: Aligns the item at the baseline.
    • stretch: Stretches the item to fill the container (if not a fixed size)


 EXAMPLE OF FLEXBOX

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>Simple Flexbox Example</title>
    <style>
        /* Flex container */
        .container {
            display: flex;
            justify-content: center; /* Center items horizontally */
            align-items: center; /* Center items vertically */
            height: 100vh; /* Full viewport height */
            background-color: #f0f0f0; /* Light gray background */
        }
 
        /* Flex items */
        .box {
            width: 100px;
            height: 100px;
            background-color: #4CAF50; /* Green background */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
 
    <div class=”container”>
        <div class=”box”>1</div>
        <div class=”box”>2</div>
        <div class=”box”>3</div>
    </div>
 
</body>
</html>
 
OUTPUT
Simple Flexbox Example
1
2
3

EXPLANATION

1.    Container:

    • The .container class is a flex container (display: flex).
    • justify-content: center centers the boxes horizontally within the container.
    • align-items center centers the boxes vertically within the container.
    • height: 100vh makes the container’s height equal to the full height of the viewport.

2.    Flex Items (Boxes):

    • The .box class defines the styles for each box.
    • Each box has a fixed size of 100px x 100px, with a green background and centered white text.
    • margin:10px adds space between the boxes.
Scroll to Top