Skip to content

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

License

Notifications You must be signed in to change notification settings

eludadev/css-docs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

✨ 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: startalign-content: space-around
align-content: centeralign-content: space-between
align-content: endalign-content: stretch
Justify Content

Distribute content along the vertical axis.

justify-content: startjustify-content: space-around
justify-content: centerjustify-content: space-between
justify-content: endjustify-content: stretch
Align Items

Distribute content along the horizontal axis within their grid area.

align-items: startalign-items: center
align-items: endalign-items: stretch
Justify Items

Distribute content along the vertical axis within their grid area.

justify-items: startjustify-items: center
justify-items: endjustify-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: rowflex-direction: column
flex-direction: row-reverseflex-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-startalign-content: space-around
align-content: centeralign-content: space-between
align-content: flex-endalign-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-startjustify-content: space-around
justify-content: centerjustify-content: space-between
justify-content: flex-endjustify-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-startalign-items: center
align-items: flex-endalign-items: stretch
High Resolution Grayscale Print