eludadev/css-docs: CSS Selectors, Flexbox, Grid, Box Model, visually...

:sparkles: CSS Selectors

Preview	Selector	Description
	a > b Child Combinator	Select all b elements that are directly inside of a elements.
	a b Descendant Combinator	Select all b elements that are anywhere inside of a elements.
	a + b Adjacent sibling combinator	Select all b elements that are immediately next to a elements.
	a ~ b General sibling combinator	Select all b elements that are anywhere after a elements.
	.cl Class selector	Select all elements that have the cl class name.
	a.cl Tag + Class selector	Select all a elements that have the cl class name.
	.cl1.cl2 Multiclass selector	Select all elements that have both the cl1 and cl2 class names.
	a[x=y] Attribute selector	Select all a elements that have the x attribute set to y.
	#id1 ID selector	Select the element with the id1 ID name.
	* Universal selector	Select all elements.

High Resolution	Grayscale Print

:sparkles: CSS Box Model

Preview	Property	Description
	`box-sizing: border-box`	The `width` and `height` have the size of `content`+`padding`+`border`
	`box-sizing: content-box`	The `width` and `height` have the size of just `content`

High Resolution

:sparkles: CSS Grid Layout

Align Content

Distribute content along the horizontal axis.

	`align-content: start`		`align-content: space-around`
	`align-content: center`		`align-content: space-between`
	`align-content: end`		`align-content: stretch`

Justify Content

Distribute content along the vertical axis.

	`justify-content: start`		`justify-content: space-around`
	`justify-content: center`		`justify-content: space-between`
	`justify-content: end`		`justify-content: stretch`

Align Items

Distribute content along the horizontal axis within their grid area.

	`align-items: start`		`align-items: center`
	`align-items: end`		`align-items: stretch`

Justify Items

Distribute content along the vertical axis within their grid area.

	`justify-items: start`		`justify-items: center`
	`justify-items: end`		`justify-items: stretch`

High Resolution	Grayscale Print

:sparkles: CSS Flexbox Layout

Flex Direction

The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

	`flex-direction: row`		`flex-direction: column`
	`flex-direction: row-reverse`		`flex-direction: column-reverse`

Align Content

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis.

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

Justify Content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container.

	`justify-content: flex-start`		`justify-content: space-around`
	`justify-content: center`		`justify-content: space-between`
	`justify-content: flex-end`		`justify-content: stretch`

Align Items

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.