primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-29 17:12:27 +03:00
Code Issues Projects Releases Wiki Activity

docs added

Browse Source
This commit is contained in:
Mauricio Hernan Cabrera 2020-08-26 22:44:24 -03:00
parent d967d75a57
commit 1f8c3b1356
1 changed files with 20 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/content/utilities/flexbox.md
View File

@ -132,8 +132,9 @@ You can choose whether flex items are forced into a single line or wrapped onto
### CSS
```css
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }
```
### Classes
@ -142,6 +143,7 @@ You can choose whether flex items are forced into a single line or wrapped onto
| --- | --- |
| `.flex-wrap` | Flex items will break onto multiple lines (default) |
| `.flex-nowrap` | Flex items are laid out in a single line, even if they overflow |
| `.flex-wrap-reverse` | Behaves the same as wrap but cross-start and cross-end are permuted. |
### `flex-wrap` example
@ -175,6 +177,22 @@ You can choose whether flex items are forced into a single line or wrapped onto
</div>
```
### `flex-wrap-reverse` example
```html live
<div class="border d-flex flex-wrap-reverse">
<div class="p-5 px-6 border bg-gray-light">1</div>
<div class="p-5 px-6 border bg-gray-light">2</div>
<div class="p-5 px-6 border bg-gray-light">3</div>
<div class="p-5 px-6 border bg-gray-light">4</div>
<div class="p-5 px-6 border bg-gray-light">5</div>
<div class="p-5 px-6 border bg-gray-light">6</div>
<div class="p-5 px-6 border bg-gray-light">7</div>
<div class="p-5 px-6 border bg-gray-light">8</div>
<div class="p-5 px-6 border bg-gray-light">9</div>
</div>
```
## Justify content
Use these classes to distribute space between and around flex items along the **main axis** of the container.