This repository has been archived by the owner on Sep 27, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 5
Flexbox Container Section
Andrea Simone Costa edited this page Jun 14, 2018
·
44 revisions
| Class | Meaning |
|---|---|
| sb-flex-row |
display: flex;flex-direction: row;
|
| sb-flex-rev-row |
display: flex;flex-direction: row-reverse;
|
| sb-flex-col |
display: flex;flex-direction: column;
|
| sb-flex-rev-col |
display: flex;flex-direction: column-reverse;
|
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row">
</div>Add these modifiers at the end of the previous classes to change flex-direction rule according to screen's width (higher priority than previous ones)
| Modifier | Meaning |
|---|---|
| -l | 992 <= width; |
| -m | 600 <= width <= 992; |
| -s | width <= 600; |
Examples:
<!-- This is a flexbox container only from 600px to 992px -->
<div class="sb-flex-row-m">
</div><!-- This is a flexbox container with direction = row from 0px to 992px / direction = col from 992px -->
<div class="sb-flex-row sb-flex-col-l">
</div>| Class | Meaning |
|---|---|
| sb-flex-inline | display: inline-flex; |
| sb-wrap | flex-wrap: wrap; |
| sb-rev-wrap | flex-wrap: wrap-reverse; |
| sb-nowrap | flex-wrap: nowrap; |
Examples:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap">
</div><!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-rev-wrap sb-flex-inline">
</div><!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-rev-wrap">
</div>Add these modifiers at the end of the previous classes to change wrap rule and flex-inline according to screen's width
| Modifier | Meaning |
|---|---|
| -l | 992 <= width; |
| -m | 600 <= width <= 992; |
| -s | width <= 600; |
Obtained rules will have more importance than those without modifiers, so you can use them together to avoid specifying a rule for each value of the width (example number 2)
Examples:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap-s sb-wrap-m sb-nowrap-l">
</div><!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-nowrap-l">
</div>| Class | Meaning |
|---|---|
| sb-jc-flex-start | justify-content: flex-start; |
| sb-jc-flex-end | justify-content: flex-end; |
| sb-jc-center | justify-content: center; |
| sb-jc-space-bn | justify-content: space-between; |
| sb-jc-space-ad | justify-content: space-around; |
| sb-jc-initial | justify-content: initial; |
| sb-jc-inherit | justify-content: flex-inherit; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-jc-space-ad">
<div><div>
</div>| Class | Meaning |
|---|---|
| sb-ai-stretch | align-items: stretch; |
| sb-ai-center | align-items: center; |
| sb-ai-flex-start | align-items: flex-start; |
| sb-ai-flex-end | align-items: flex-end; |
| sb-ai-baseline | align-items: baseline; |
| sb-ai-initial | align-items: initial; |
| sb-ai-inherit | align-items: inherit; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-ai-center">
<div><div>
</div>| Class | Meaning |
|---|---|
| sb-ac-stretch | align-content: stretch; |
| sb-ac-center | align-content: center; |
| sb-ac-flex-start | align-content: flex-start; |
| sb-ac-flex-end | align-content: flex-end; |
| sb-ac-space-bn | align-content: space-between; |
| sb-ac-space-ad | align-content: space-around |
| sb-ac-initial | align-content: initial; |
| sb-ac-inherit | align-content: inherit; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-ac-center">
<div><div>
</div>| Class | Meaning |
|---|---|
| sb-items-1-1-100 | flex: 1 1 100%; |
| sb-items-1-1-90 | flex: 1 1 90% |
| sb-items-1-1-80 | flex: 1 1 80%; |
| sb-items-1-1-70 | flex: 1 1 70%; |
| sb-items-1-1-60 | flex: 1 1 60%; |
| sb-items-1-1-50 | flex: 1 1 50%; |
| sb-items-1-1-40 | flex: 1 1 40%; |
| sb-items-1-1-third | flex: 1 1 33.3333%; |
| sb-items-1-1-30 | flex: 1 1 30%; |
| sb-items-1-1-quarter | flex: 1 1 25%; |
| sb-items-1-1-20 | flex: 1 1 20%; |
| sb-items-1-1-sixth | flex: 1 1 16.6666%; |
| sb-items-1-1-seventh | flex: 1 1 14.2857%; |
| sb-items-1-1-eighth | flex: 1 1 12.50%; |
| sb-items-1-1-ninth | flex: 1 1 11.1111%; |
| sb-items-1-1-10 | flex: 1 1 10%; |
| sb-items-1-1-0 | flex: 1 1 0; |
| sb-items-1-1-auto | flex: 1 1 auto; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-items-sixth">
<div>item<div>
<div>item<div>
<div>item<div>
</div>| Class | Meaning |
|---|---|
| sb-items-0-1-100-nog | flex: 0 1 100%; |
| sb-items-0-1-90-nog | flex: 0 1 90% |
| sb-items-0-1-80-nog | flex: 0 1 80%; |
| sb-items-0-1-70-nog | flex: 0 1 70%; |
| sb-items-0-1-60-nog | flex: 0 1 60%; |
| sb-items-0-1-50-nog | flex: 0 1 50%; |
| sb-items-0-1-40-nog | flex: 0 1 40%; |
| sb-items-0-1-third-nog | flex: 0 1 33.3333%; |
| sb-items-0-1-30-nog | flex: 0 1 30%; |
| sb-items-0-1-quarter-nog | flex: 0 1 25%; |
| sb-items-0-1-20-nog | flex: 0 1 20%; |
| sb-items-0-1-sixth-nog | flex: 0 1 16.6666%; |
| sb-items-0-1-seventh-nog | flex: 0 1 14.2857%; |
| sb-items-0-1-eighth-nog | flex: 0 1 12.50%; |
| sb-items-0-1-ninth-nog | flex: 0 1 11.1111%; |
| sb-items-0-1-10-nog | flex: 0 1 10%; |
| sb-items-0-1-0-nog | flex: 0 1 0; |
| sb-items-0-1-auto-nog | flex: 0 1 auto; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-items-sixth-nog">
<div>item<div>
<div>item<div>
<div>item<div>
</div>| Class | Meaning |
|---|---|
| sb-items-1-0-100-nos | flex: 1 0 100%; |
| sb-items-1-0-90-nos | flex: 1 0 90% |
| sb-items-1-0-80-nos | flex: 1 0 80%; |
| sb-items-1-0-70-nos | flex: 1 0 70%; |
| sb-items-1-0-60-nos | flex: 1 0 60%; |
| sb-items-1-0-50-nos | flex: 1 0 50%; |
| sb-items-1-0-40-nos | flex: 1 0 40%; |
| sb-items-1-0-third-nos | flex: 1 0 33.3333%; |
| sb-items-1-0-30-nos | flex: 1 0 30%; |
| sb-items-1-0-quarter-nos | flex: 1 0 25%; |
| sb-items-1-0-20-nos | flex: 1 0 20%; |
| sb-items-1-0-sixth-nos | flex: 1 0 16.6666%; |
| sb-items-1-0-seventh-nos | flex: 1 0 14.2857%; |
| sb-items-1-0-eighth-nos | flex: 1 0 12.50%; |
| sb-items-1-0-ninth-nos | flex: 1 0 11.1111%; |
| sb-items-1-0-10-nos | flex: 1 0 10%; |
| sb-items-1-0-0-nos | flex: 1 0 0; |
| sb-items-auto-nos | flex: 1 0 auto; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-items-20-nos">
<div>item<div>
<div>item<div>
<div>item<div>
</div>| Class | Meaning |
|---|---|
| sb-items-0-0-100-nogs | flex: 0 0 100%; |
| sb-items-0-0-90-nogs | flex: 0 0 90% |
| sb-items-0-0-80-nogs | flex: 0 0 80%; |
| sb-items-0-0-70-nogs | flex: 0 0 70%; |
| sb-items-0-0-60-nogs | flex: 0 0 60%; |
| sb-items-0-0-50-nogs | flex: 0 0 50%; |
| sb-items-0-0-40-nogs | flex: 0 0 40%; |
| sb-items-0-0-third-nogs | flex: 0 0 33.3333%; |
| sb-items-0-0-30-nogs | flex: 0 0 30%; |
| sb-items-0-0-quarter-nogs | flex: 0 0 25%; |
| sb-items-0-0-20-nogs | flex: 0 0 20%; |
| sb-items-0-0-sixth-nogs | flex: 0 0 16.6666%; |
| sb-items-0-0-seventh-nogs | flex: 0 0 14.2857%; |
| sb-items-0-0-eighth-nogs | flex: 0 0 12.50%; |
| sb-items-0-0-ninth-nogs | flex: 0 0 11.1111%; |
| sb-items-0-0-0-nogs | flex: 0 0 0; |
| sb-items-0-0-auto-nogs | flex: 0 0 auto; |
Example:
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-items-sixth-nogs">
<div>item<div>
<div>item<div>
<div>item<div>
</div>Add these modifiers at the end of the previous classes to change flex rule according to screen's width (higher priority than previous ones)
| Modifier | Meaning |
|---|---|
| -l | 992 <= width; |
| -m | 600 <= width <= 992; |
| -s | width <= 600; |
<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-items-30-nogs sb-items-sixth-nogs-l">
<div>item<div>
<div>item<div>
<div>item<div>
</div><!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-items-100-s sb-items-60-m sb-items-third-l">
<div>item<div>
<div>item<div>
<div>item<div>
</div>