Day-3rd of learning HTML and CSS...

Display:Flex
The display: flex property enables the flexbox layout mode, allowing you to manipulate elements' alignment, spacing, and order within a container.

1. The flex-direction property specifies the direction of the flexible items.
   flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

2. column The flexible items are displayed vertically, as a column

3. column-reverse Same as column, but in reverse order

4. rowDefault value. The flexible items are displayed horizontally, as a row.

5. row-reverse Same as row, but in reverse order.

Using flex-direction together with media queries to create a different layout for different screen sizes/devices:

.flex-container {
  display: flex;
  flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

• length - specifies a padding in px, pt, cm, etc.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

• Allign Items used for column.

• Justify-content used for row. It Always flex direction.

• Out of the box use as Margin.

• Inside the box use as Padding.