HTML and CSS

#css #programming #html #webdev

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.

DEV Community