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

Merge pull request #1148 from MauricioHernanCabrera/flex-wrap-reverse

Browse Source 
flex wrap reverse added
This commit is contained in:
simurai 2020-09-08 13:25:43 +09:00 committed by GitHub
commit 3e826643bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 4 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.

5
src/utilities/flexbox.scss
View File

@ -9,8 +9,9 @@
.flex#{$variant}-column { flex-direction: column !important; }
.flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
.flex#{$variant}-wrap { flex-wrap: wrap !important; }
.flex#{$variant}-nowrap { flex-wrap: nowrap !important; }
.flex#{$variant}-wrap-reverse { flex-wrap: wrap-reverse !important; }
.flex#{$variant}-justify-start { justify-content: flex-start !important; }
.flex#{$variant}-justify-end { justify-content: flex-end !important; }