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: 5 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 |
| --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) |a > b
| Select all b elements that are directly inside of a elements. |
Child Combinator
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator) | | Select all b elements that are anywhere inside of a elements. |
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator) |a + b
| Select all b elements that are immediately next to a elements. |
Adjacent sibling combinator
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator) |a ~ b
| Select all b elements that are anywhere after a elements. |
General sibling combinator
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) | | Select all elements that have the cl class name. |
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors) | | Select all a elements that have the cl class name. |
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) |.cl1.cl2
| Select all elements that have both the cl1 and cl2 class names. |
Multiclass selector
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) |a\[x=y\]
| Select all a elements that have the x attribute set to y. |
Attribute selector
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/ID_selectors) |#id1
| Select the element with the id1 ID name. |
ID selector
| [](https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors) | | Select all elements. || High Resolution | Grayscale Print |
| --------------- | --------------- |
| [](./assets/css_selectors.png) | [](./assets/css_selectors_print.png) |## :sparkles: CSS Box Model
| Preview | Property | Description |
| --------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [](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` |
| [](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/css_box_model.png) |## :sparkles: CSS Grid Layout
| Align Content |
| --------------------------------- |
|Distribute content along the horizontal axis.
|
| [](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)[](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)[](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)[](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)[](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)[](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.
|
| [](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)[](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)[](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)[](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)[](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)[](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.
|
| [](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)[](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)[](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)[](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.
|
| [](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)[](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)[](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)[](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/css_grid.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).
|
| [](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)[](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)[](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)[](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.
|
| [](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)[](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)[](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)[](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)[](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)[](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.
|
| [](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)[](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)[](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)[](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)[](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)[](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.
|
| [](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)[](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)[](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)[](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/css_flexbox.png) | [](./assets/css_flexbox_print.png) |