SEMANTIC TAGS
- A semantic element clearly describes its meaning to both the browser and the developer.
- Examples of non-semantic elements: div and span – Tells nothing about its content.
- Examples of semantic elements: img, table, article – Clearly defines its content.
CSS DISPLAY PROPERTY
The display property specifies the display behavior (the type of rendering box) of an element.
CSS Flexbox (Flexible Box Layout)
- Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way.
- Flexbox makes it easy to design a flexible and responsive layout, without using float or positioning.
A flexbox always consists of:
- A Flex Container – The parent (container) element, where the display property is set to flex or inline-flex
- One or more Flex Items – The direct children of the flex container automatically becomes flex items
CSS justify-content Property
The justify-content property aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally).
CSS align-items Property
The align-items property specifies the default alignment for items inside a flexbox or grid container.
- In a flexbox container, the flexbox items are aligned on the cross axis, which is vertical by default (opposite of flex-direction).
- In a grid container, the grid items are aligned in the block direction. For pages in English, block direction is downward and inline direction is left to right.
- For this property to have any alignment effect, the items need available space around themselves in the appropriate direction.
Tip: Use the align-self property of each item to override the align-items property.
Reference : https://www.w3schools.com/html/html5_semantic_elements.asp
