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 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