Nested Flexbox Container Section

What about nested flexbox?

flex-display rule and flex-direction rule

Add these classes to the flexbox container to automagically force flexbox items to become flexbox containers as well

Class	Meaning for all items
sb-n-flex-row	display: flex; flex-direction: row;
sb-n-flex-rev-row	display: flex; flex-direction: row-reverse;
sb-n-flex-col	display: flex; flex-direction: column;
sb-n-flex-rev-col	display: flex; flex-direction: column-reverse;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-n-flex-col">
    <div><span>This div is a a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a a flexbox item and a flexbox container as well</span></div>
</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)

You can also decide to activate the display:flex rule only in a certain range of width

Modifier	Meaning
-l	992 <= width;
-m	600 <= width <= 992;
-s	width <= 600;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-n-flex-col-m">
    <div><span>This div is a a flexbox item and a flexbox container as well only from 600px to 992px</span></div>
    <div><span>This div is a a flexbox item and a flexbox container as well only from 600px to 992px</span></div>
    <div><span>This div is a a flexbox item and a flexbox container as well only from 600px to 992px</span></div>
</div>

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-n-flex-col sb-n-flex-row-l">
    <div><span>This div is a a flexbox item and a flexbox container as well (col from 0px to 992px, row from 992px)</span></div>
    <div><span>This div is a a flexbox item and a flexbox container as well (col from 0px to 992px, row from 992px)</span></div>
    <div><span>This div is a a flexbox item and a flexbox container as well (col from 0px to 992px, row from 992px)</span></div>
</div>

You can change breakpoints -> sass/data/_breakpoints.sass

wrap, nowrap, wrap-reverse and flex-inline

Add these classes to the flexbox container to change wrap direction and inline rules for nested flexbox containers

Class	Meaning for all items
sb-n-flex-inline	display: inline-flex;
sb-n-wrap	flex-wrap: wrap;
sb-n-rev-wrap	flex-wrap: wrap-reverse;
sb-n-nowrap	flex-wrap: nowrap;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-n-flex-col sb-n-rev-wrap"> 
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
</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 sb-n-flex-col sb-n-wrap-s sb-n-wrap-m sb-n-nowrap-l"> 
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
</div>

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-n-flex-col sb-n-wrap sb-n-nowrap-l"> 
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
</div>

You can change breakpoints -> sass/data/_breakpoints.sass

What if you need a nested flexbox container different from others?
You can override general nested flexbox rules simply adding one of the main flexbox container classes to it.

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-wrap sb-n-flex-col sb-n-wrap"> 
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div class="sb-flex-row sb-nowrap"><span>This div is a flexbox item and a flexbox container as well, with his own rules</span></div>
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
</div>

You can override all nested flexbox rules in this way!

justify-content rule

Add these classes to the flexbox container to change the justify-content rule for nested flexbox containers

Class	Meaning
sb-n-jc-flex-start	justify-content: flex-start;
sb-n-jc-flex-end	justify-content: flex-end;
sb-n-jc-center	justify-content: center;
sb-n-jc-space-bn	justify-content: space-between;
sb-n-jc-space-ad	justify-content: space-around;
sb-n-jc-initial	justify-content: initial;
sb-n-jc-inherit	justify-content: flex-inherit;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-n-flex-row sb-n-nowrap sb-n-jc-space-ad">
    <div><div>
</div>

align-items rule

Add these classes to the flexbox container to change the align-items rule for nested flexbox containers

Class	Meaning
sb-n-ai-stretch	align-items: stretch;
sb-n-ai-center	align-items: center;
sb-n-ai-flex-start	align-items: flex-start;
sb-n-ai-flex-end	align-items: flex-end;
sb-n-ai-baseline	align-items: baseline;
sb-n-ai-initial	align-items: initial;
sb-n-ai-inherit	align-items: inherit;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-n-flex-row sb-nowrap sb-n-ai-center">
    <div><div>
</div>

align-content rule

Add these classes to the flexbox container to change the align-content rule for nested flexbox containers

Class	Meaning
sb-n-ac-stretch	align-content: stretch;
sb-n-ac-center	align-content: center;
sb-n-ac-flex-start	align-content: flex-start;
sb-n-ac-flex-end	align-content: flex-end;
sb-n-ac-space-bn	align-content: space-between;
sb-n-ac-space-ad	align-content: space-around
sb-n-ac-initial	align-content: initial;
sb-n-ac-inherit	align-content: inherit;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-rev-row sb-nowrap sb-n-flex-row sb-n-nowrap sb-n-ac-space-bn">
    <div><div>
</div>