<div class="my-container">  <img src="my-picture.jpg" alt="scenic view" />  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Esse facilis provident culpa eos sed sunt voluptates.</p></div>.my-container {  display: flex;  flex-direction: row;}

.parent {

    display: flex; /* or inline-flex */

    flex-direction: row | row-reverse | column | column-reverse;

    flex-wrap: nowrap | wrap | wrap-reverse;

    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;

    align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;

    align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline; 

    /* GAP */

    gap: 10px;

    gap: 10px 20px; /* row-gap column gap */

    row-gap: 10px;

    column-gap: 20px;

}

.children {

    order: 5; /* default is 0 */

    flex-grow: 4; /* default 0 */

    flex-shrink: 3; /* default 1 */

    flex-basis:  33.33% | auto; /* default size auto */

    /* Shorthand */

    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

    align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

/* Display: It enables a flex container; inline or block */

display: flex;

​

/* Flex-direction: Determines the direction of the items. */

flex-direction: row

​

/* Flex-wrap: Determines whether the flex items should wrap or not. */

flex-wrap: wrap;

​

/* Justify-content: This property is used to align the flex items. flex-wrap: nowrap; */

justify-content: flex-start;

​

/* Align-items: Determines the behavior for how flex items are laid out along the cross-axis on the current line. */

align-items: flex-start;

​

/* Align-content: specifies the distribution of space between and around content items along a flexbox's cross-axis */

align-content: flex-start;

​

/* Order: It is used to control the order in which flex items appear in the flex container. */

order: 1;

​

/* Flex-grow: It allows representing the ability of a flex item to grow by your choice. */

flex-grow: 1;

​

/* Flex-basis: This defines the default size of an element before the remaining space is distributed */

flex-basis: 50%;

​

/* Flex-shrink: Defines the ability for a flex item to shrink. */

flex-shrink: 3;

​

/* Align-self: Sets the alignment for individual items. */

align-self: flex-start;

        <style>

            .container {

                display: flex;

                flex-direction: row;

                column-gap: 2rem;

            }

​

            .box {

                background: yellow;

                width: 6rem;

                height: 6rem;

            }

        </style>    

​

​

​

        <div class="container">

            <div class="box">1</div>

            <div class="box">2</div>

            <div class="box">3</div>

            <div class="box">4</div>

        </div>

​

/* 

  Most Common Flexbox properties:

​

    display: flex; 

    flex-direction: row / column;     --> used to justify the direction of content

    flex-wrap: wrap;                  --> holds the content inside flexbox container

​

  These Properties are also part of flexbox and only apply on a container which contain flexbox property

​

  Justify content:

    center

    start

    end

    baseline

    space-around -->commonly used

​

  Align items:

    center  

    baseline

  fr = fill up any available space

​

*/

​

.flexbox {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: space-around;

    /* column-count: 2;

  columns: 2; */

}

Flexbox Notes

​

- display: flex; (the container)

-flex-direction: row | row-reverse | column | column-reverse;

-flex-wrap: wrap;/no-wrap

-justify-content: start |  center | space-between | space-around | space-evenly

-align-items: flex-start | flex-end | center | baseline | stretch | inherit | initial

-height: xx;

-width: xx;

-flex basis: auto-'default value'| number | inherit | initial;

-flex-basis- 20em (used to control size)

   flex: 1(grow) 2(stretch) 20em (starts with{initial size}-basis) 

​

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Flexbox Tutorial</title>

    <style>

        .container{

            height: 544px; 

            width: 100%;

            border: 2px solid black;

            display: flex; /* Initialize the container as a flex box */

            /* Flex properties for a flex container */

​

            /* flex-direction: row; (Default value of flex-direction is row) */

            /* flex-direction: column;

            flex-direction: row-reverse;

            flex-direction: column-reverse; */

​

            /* flex-wrap: wrap; (Default value of flex-direction is no-wrap) */

            /* flex-wrap: wrap-reverse; */

​

            /* This is a shorthand for flex-direction: and flex-wrap: ;; */

            /* flex-flow: row-reverse wrap; */ 

​

            /* justify-content will justify the content in horizontal direction */

            /* justify-content: center; */

            /* justify-content: space-between; */

            /* justify-content: space-evenly; */

            /* justify-content: space-around; */

​

            /* justify-content will justify the content in vertical direction */

            /* align-items: center; */

            /* align-items: flex-end; */

            /* align-items: flex-start; */

            /* align-items: stretch; */ 

        }

        .item{

            width: 200px;

            height: 200px;

            background-color: tomato;

            border: 2px solid green;

            margin: 10px;

            padding: 3px;

        }

​

        #item-1{

            /* Flex properties for a flex item */

            /* Higher the order, later it shows up in the container */

            /* order: 2; */

​

            /* flex-grow: 2;

            flex-shrink: 2; */

​

        }

        #item-2{

            /* flex-grow: 3;

            flex-shrink: 3 ; */

            flex-basis: 160px;

            /* when flex-direction is set to row flex-basis: will control width */

            /* when flex-direction is set to column flex-basis: will control height */

        }

        #item-3{

            /* flex: 2 2 230px; */

            align-self: flex-start;

            align-self: flex-end;

            align-self: center;

​

            }

​

    </style>

</head>

<body>

    <h1>This is Flexbox Tutorial</h1>

    <div class="container">

        <div class="item" id="item-1">First Box</div>

        <div class="item" id="item-2">Second Box</div>

        <div class="item" id="item-3">Third Box</div>

        <!-- <div class="item" id="item-4">Fourth Box</div>

        <div class="item" id="item-5">Fifth Box</div>

        <div class="item" id="item-6">Sixth Box</div> -->

    </div>

</body>

</html>

<div class="flex-container">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

​

​

Display: flex 

Flex-direction: row | row-reverse | column | column-reverse

align-self: flex-start | flex-end | center | baseline | stretch

justify-content: start |  center | space-between | space-around | space-evenly

.container {

  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

}

display:flex

flex-direction:row| row-reverse|column|column-reverse

align-self:flex-start|flex-end|center|baaseline|strech

justify-content:start|center|space-between|space-around|space-evenly

/* 

    Flexbox cheatsheet

*/

The flex container properties are:

/* It is recommended that you use this shorthand property rather than set the individual properties. */

​

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

flex-flow: column wrap; /* shorthand for the flex-direction and flex-wrap properties */

flex-grow: 4; /* default 0 */

flex-shrink: 3; /* default 1 */

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 

/* shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional.  */

flex-basis:  | auto; /* default auto */

​

.item2 {

  flex-basis: 100px;

}

​

gap: 10px 20px; /* row-gap column gap */

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;

/* This defines the default behavior for how flex items are laid out along the cross axis on the current line.  */

align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

order: 5; /* default is 0 */

​

.container {

  display: flex; /* or inline-flex */

}