Css notes

To start using the Flexbox model, you need to first define a flex container.

A flex container with three flex items:

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

The flex container becomes flexible by setting the display property to flex:

.flex-container {
  display: flex;
}

 flex-direction

Applies on flex items

  flex-direction: column;

flex-direction: column-reverse;

 flex-direction: row;

flex-direction: row-reverse;

 flex-wrap
 FLEX ITEMS

flex-wrap: wrap;

  flex-wrap: non wrap;

 flex-wrap: wrap-reverse;

 flex-flow: row wrap;

 flex-flow
  justify-content

justify-content: center;

 justify-content: flex-start;

  justify-content: flex-end;

 justify-content: space-around;

 justify-content: space-between;

 align-items

ADJUST the flex items:

 align-items: center;

 align-items: flex-start;

 align-items: flex-end;

 align-items: stretch;

 align-items: baseline;

 align-content

ADJUST the flex line:

align-content: space-between;
align-content: space-around;
 align-content: stretch;
  align-content: center;
align-content: flex-start;
align-content: flex-end;