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

CSS Selectors, Flexbox, Grid, Box Model, visually explained.
https://github.com/youneslaaroussi/css-docs
awesome css framework frontend reference sass web-development webdev webdevelopment
Last synced: 29 days 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 (almost 3 years ago)
Default Branch: main
Last Pushed: 2023-02-04T10:06:53.000Z (about 2 years ago)
Last Synced: 2025-01-06T02:01:36.522Z (about 2 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) |
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

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

Awesome Lists containing this project

README
