eludadev/css-docs

CSS Selectors, Flexbox, Grid, Box Model, visually explained.

✨ 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

✨ 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

✨ 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

✨ 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.
align-items: flex-start align-items: center align-items: flex-end align-items: stretch

High Resolution	Grayscale Print