Flexbox in CSS

What is flexbox?

  • The flexbox makes it easier to design a flexible responsive layout of a web page.

  • It is used to create a flexible structure without using float or positioning.

  • flex display property is used to make flex display.


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Flexbox Property in CSS </title>
    <style>

    </style>

</head>
<body>

</body>
</html>


Flex Container Properties

i) flex-direction: This flexbox property is used to specify the direction of the flexbox container's item.

.flex-container {
     flex-direction: column;
 }


ii) flex-wrap:  This property specifies whether the flex items should wrap or not.

.flex-container {
        flex-wrap: wrap;
 }


iii) flex-flow: This is a shorthand property for flex-direction and flex-wrap.

.flex-container {
            flex-flow: row wrap;
 }


iv) justify-content: This property is used to horizontally aligns the flex items.

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


v) align-items: This property is used to vertically align the flex items.

.flex-container {
            align-items: center;
 }


vi) align-content: This property is used to align the flex lines.

.flex-container {
            align-content: flex-start;
 }


Flex Item Properties

The direct child elements of a flex container are flex items.

i) order: The order property specifies the order of the flex items.

.flex-container div {
            order: 4;
 }


ii) flex-grow: This property specifies how much a flex item will grow relative to the rest of the flex items.

.flex-container div {
            flex-grow: 4;
 }


iii) flex-shrink: This property specifies how much a flex item will shrink relative to the rest of the flex items.

.flex-container div {
            flex-shrink: 4;
 }


iv) flex-basis: The flex-basis property specifies the initial length of a flex item.

.flex-container div {           
            flex-basis: 100px;
 }


v) align-self: This property specifies the alignment for the selected item inside the flexible container.

.flex-container div {
            align-self: center;
 }


Using Flexbox Properties

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Flexbox in CSS</title>
    <style>
        .flex-container {
            display: flex;
            flex-wrap: wrap;
        }

        .flex-container div {
            background-color: blue;
            color: white;
            width: 100px;
            height: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>
<body>

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

</body>
</html>

Output:



CSS Flexbox Property PDF

Download Now

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming-related Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad