https://github.com/youneslaaroussi/css-docs

CSS Selectors, Flexbox, Grid, Box Model, visually explained.
https://github.com/youneslaaroussi/css-docs

List: css-docs

awesome css framework frontend reference sass web-development webdev webdevelopment

Last synced: 6 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/youneslaaroussi/css-docs
• Owner: youneslaaroussi
• License: gpl-3.0
• Created: 2022-05-18T17:55:51.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-04T10:06:53.000Z (over 2 years ago)
• Last Synced: 2025-01-06T02:01:36.522Z (6 months ago)
• Topics: awesome, css, framework, frontend, reference, sass, web-development, webdev, webdevelopment
• Homepage:
• Size: 9.03 MB
• Stars: 705
• Watchers: 14
• Forks: 92
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## :sparkles: CSS Selectors

| Preview                           | Selector                                                     | Description                                                  |

| --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |

| [![](./assets/css_selectors_1.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) | 
a > b
Child Combinator
 | Select all b elements that are directly inside of a elements. |

| [![](./assets/css_selectors_2.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) | 
a   b
Descendant Combinator
 | Select all b elements that are anywhere inside of a elements. |

| [![](./assets/css_selectors_3.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) | 
a + b
Adjacent sibling combinator
 | Select all b elements that are immediately next to a elements. |

| [![](./assets/css_selectors_4.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) | 
a ~ b
General sibling combinator
 | Select all b elements that are anywhere after a elements. |

| [![](./assets/css_selectors_5.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) | 
.cl
Class selector
 | Select all elements that have the cl class name. |

| [![](./assets/css_selectors_6.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) | 
a.cl
Tag + Class selector
 | Select all a elements that have the cl class name. |

| [![](./assets/css_selectors_7.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) | 
.cl1.cl2
Multiclass selector
 | Select all elements that have both the cl1 and cl2 class names. |

| [![](./assets/css_selectors_8.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) | 
a\[x=y\]
Attribute selector
 | Select all a elements that have the x attribute set to y. |

| [![](./assets/css_selectors_9.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) | 
#id1
ID selector
 | Select the element with the id1 ID name. |

| [![](./assets/css_selectors_10.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) | 
*
Universal selector
 | Select all elements. |


| High Resolution | Grayscale Print |

| --------------- | --------------- |

| [![](./assets/lowres-css_selectors.png)](./assets/css_selectors.png) | [![](./assets/lowres-css_selectors_print.png)](./assets/css_selectors_print.png) |

## :sparkles: CSS Box Model

| Preview                           | Property                                                     | Description                                                  |

| --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |

| [![](./assets/css_box_model_1.png)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) | 
[`box-sizing: border-box`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
 | The `width` and `height` have the size of `content`+`padding`+`border` |

| [![](./assets/css_box_model_2.png)](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) | 
[`box-sizing: content-box`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
 | The `width` and `height` have the size of just `content` |


| High Resolution |

| --------------- |

| [![](./assets/lowres-css_box_model.png)](./assets/css_box_model.png) |

## :sparkles: CSS Grid Layout

| Align Content                             |

| --------------------------------- |

| 
Distribute content along the horizontal axis.
 |

| [![](./assets/css_grid_align_content_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: start`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_grid_align_content_space_around.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: space-around`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_grid_align_content_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_grid_align_content_space_between.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: space-between`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_grid_align_content_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: end`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_grid_align_content_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) |


| Justify Content                             |

| --------------------------------- |

| 
Distribute content along the vertical axis.
 |

| [![](./assets/css_grid_justify_content_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: start`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_grid_justify_content_space_around.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: space-around`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_grid_justify_content_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_grid_justify_content_space_between.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: space-between`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_grid_justify_content_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: end`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_grid_justify_content_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) |


| Align Items                             |

| --------------------------------- |

| 
Distribute content along the horizontal axis within their grid area.
 |

| [![](./assets/css_grid_align_items_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: start`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[![](./assets/css_grid_align_items_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[![](./assets/css_grid_align_items_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: end`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[![](./assets/css_grid_align_items_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) |


| Justify Items                            |

| --------------------------------- |

| 
Distribute content along the vertical axis within their grid area.
 |

| [![](./assets/css_grid_justify_items_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[`justify-items: start`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[![](./assets/css_grid_justify_items_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[`justify-items: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[![](./assets/css_grid_justify_items_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[`justify-items: end`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[![](./assets/css_grid_justify_items_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items)[`justify-items: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items) |


| High Resolution | Grayscale Print |

| --------------- | --------------- |

| [![](./assets/lowres-css_grid.png)](./assets/css_grid.png) | [![](./assets/lowres-css_grid_print.png)](./assets/css_grid_print.png) |

## :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).
 |

| [![](./assets/css_flexbox_flex_direction_row.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[`flex-direction: row`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[![](./assets/css_flexbox_flex_direction_column.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[`flex-direction: column`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[![](./assets/css_flexbox_flex_direction_row_reverse.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[`flex-direction: row-reverse`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[![](./assets/css_flexbox_flex_direction_column_reverse.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction)[`flex-direction: column-reverse`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) |


| Align Content                             |

| --------------------------------- |

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

| [![](./assets/css_flexbox_align_content_flex_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: flex-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_flexbox_align_content_space_around.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: space-around`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_flexbox_align_content_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_flexbox_align_content_space_between.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: space-between`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_flexbox_align_content_flex_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: flex-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[![](./assets/css_flexbox_align_content_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content)[`align-content: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) |


| 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.
 |

| [![](./assets/css_flexbox_justify_content_flex_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: flex-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_flexbox_justify_content_space_around.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: space-around`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_flexbox_justify_content_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_flexbox_justify_content_space_between.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: space-between`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_flexbox_justify_content_flex_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: flex-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[![](./assets/css_flexbox_justify_content_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)[`justify-content: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) |


| 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.
 |

| [![](./assets/css_flexbox_align_items_flex_start.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: flex-start`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[![](./assets/css_flexbox_align_items_center.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: center`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[![](./assets/css_flexbox_align_items_flex_end.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: flex-end`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[![](./assets/css_flexbox_align_items_stretch.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items)[`align-items: stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) |


| High Resolution | Grayscale Print |

| --------------- | --------------- |

| [![](./assets/lowres-css_flexbox.png)](./assets/css_flexbox.png) | [![](./assets/lowres-css_flexbox_print.png)](./assets/css_flexbox_print.png) |