/* 

  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; */

}

.flex-container {

  display: flex;

  flex-wrap: wrap;

  background-color: DodgerBlue;

}

​

//for box set in column:

.flex-container {

  display: flex;

  flex-direction: column;

//set div in column in reverse:

  .flex-container {

  display: flex;

  flex-direction: column-reverse;

//wrap in raw:

    .flex-container {

  display: flex;

  flex-flow: row wrap;

//make all div in center:

      .flex-container {

  display: flex;

  justify-content: center;

//set all div in flex-box hight in strech:

.flex-container {

  display: flex;

  height: 200px;

  align-items: stretch;

// for responsive view:

  .flex-container {

  display: flex;

  flex-direction: row;

  font-size: 30px;

  text-align: center;

}

​

.flex-item-left {

  background-color: #f1f1f1;

  padding: 10px;

  flex: 50%;

}

​

.flex-item-right {

  background-color: dodgerblue;

  padding: 10px;

  flex: 50%;

}

​

/* Responsive layout - makes a one column-layout instead of two-column layout */

@media (max-width: 800px) {

  .flex-container {

    flex-direction: column;

  }

}

//trasition property:

  div {

  width: 100px;

  height: 100px;

  background: red;

  transition: width 2s;

}

​

div:hover {

  width: 300px;

}

<!--Please give a thumbs up if this was helpfull-->

​

<div class="container">

  <div class="item">

    <p>1</p>

  </div>

  <div class="item">

    <p>2</p>

  </div>

  <div class="item">

    <p>3</p>

  </div>

  <div class="item">

    <p>4</p>

  </div>

  <div class="item">

    <p>5</p>

  </div>

  <div class="item">

    <p>6</p>

  </div>

</div>

​

<style>

:root{

  --padding:10px;

  --one-third-width: 33.33%;

  --white: #FFFFFF;

}

​

.container{

  width:300px;

  height:300px;

  display:flex;

  dlex-direction:row;

  justify-content:space-between;

  flex-wrap:wrap;

  row-gap:10px;

}

​

​

.item{

  background:red;

  display:inline-flex;

  color:var(--white);

  width:calc(var(--one-third-width) - 30px);

  height:50%;

  padding:var(--padding);

}

​

p{  

  padding:var(--padding);

  margin: 0;

}

</style>

.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 */

}

<div class="container">

  <div class="item"></div>

  <div class="item"></div>

  <div class="item"></div>

  ...

</div>

​

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Please read flexbox & grid in CSS TRIX, 

make hands-on project watching (WESBOS videos - it's really useful)

also try [FLEXBOX - froggy] and [GRID - garden] games