Tuesday, 21 January 2025

Flexbox: A Deep Dive into the justify-content Property

justify-content property is used to control the horizontal alignment of flex items in a Flexbox.

Syntax

.container {
  display: flex;
  justify-content: value;
}

 

Values of justify-content

1. flex-start: Aligns the flex items at the start of the container (default behavior).

 

Example

.container {
  display: flex;
  justify-content: flex-start;
}

 

2. flex-end: Aligns the flex items at the end of the container.

Example

 

.container {
  display: flex;
  justify-content: flex-end;
}

 

3. center: Aligns the flex items at the center of the container.

Example

.container {
  display: flex;
  justify-content: center;
}

 

4. space-between: Distributes the flex items evenly, with the first item at the start and the last item at the end of the container, leaving equal space between each item.

Example

 

.container {
  display: flex;
  justify-content: space-between;
}

 

5. space-around: Distributes the flex items evenly, but with half-sized spaces on either end. This means the space between the items is equal, but the space at the edges is half the size.

Example

 

.container {
  display: flex;
  justify-content: space-around;
}

 

6. space-evenly: Distributes the flex items so that the spaces between all items, as well as the spaces at the edges, are equal.

Example

 

.container {
  display: flex;
  justify-content: space-evenly;
}

 

flex-justify-content.html

<!DOCTYPE html>
<html>
<head>
    <style>
        .title{
            background-color: lightgray;
            color: black;
            font-size: 25px;
            margin: 10px;
        }

        .container-flex-start {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            justify-content: flex-start;
        }

        .container-flex-end {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            justify-content: flex-end;
        }

        .container-flex-center {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            justify-content: center;
        }

        .container-flex-space-between {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            justify-content: space-between;
        }

        .container-flex-space-around {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            justify-content: space-around;
        }

        .container-flex-space-evenly {
            display: flex;
            border: 2px solid black;
            padding: 10px;
            margin: 10px;
            justify-content: space-evenly;
        }

        .item {
            background-color: deepskyblue;
            padding: 10px;
            margin: 10px;
            color: white;
            text-align: center;
        }

        .scenario{
            margin-bottom: 40px;
            padding-left: 10px;
            padding-right: 10px;
        }

    </style>
</head>
<body>

    <div class = "scenario">
        <h1 class="title">justify-content: flex-start</h1>
            <div class="container-flex-start">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
            <div class="item">F</div>
        </div>
    </div>
    

    <div class = "scenario">
        <h1 class="title">justify-content: flex-end</h1>
        <div class="container-flex-end">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
            <div class="item">F</div>
        </div>
    </div>

    <div class = "scenario">
        <h1 class="title">justify-content: center</h1>
        <div class="container-flex-center">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
            <div class="item">F</div>
        </div>
    </div>

    <div class = "scenario">
        <h1 class="title">justify-content: space-between</h1>
        <div class="container-flex-space-between">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
            <div class="item">F</div>
        </div>
    </div>
    
    <div class = "scenario">
        <h1 class="title">justify-content: space-around</h1>
        <div class="container-flex-space-around">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
            <div class="item">F</div>
        </div>
    </div>
    
    <div class = "scenario">
        <h1 class="title">justify-content: space-evenly</h1>
        <div class="container-flex-space-evenly">
            <div class="item">A</div>
            <div class="item">B</div>
            <div class="item">C</div>
            <div class="item">D</div>
            <div class="item">E</div>
            <div class="item">F</div>
        </div>
    </div>
</body>
</html>

 

Above snippet generate below screen.

 


 


 

Previous                                                    Next                                                    Home
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)