Nested Flexbox Container Section

What about nested flexbox?

flex-direction rule and flex-wrap rule

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

It works only for <a>, <div>, <li> and <ul> items.

Class	Meaning for all items
sb-nested-flex-row-wrap	display: flex; flex-flow: row wrap;
sb-nested-flex-row-nowrap	display: flex; flex-flow: row nowrap;
sb-nested-flex-reverse-row-wrap	display: flex; flex-flow: row-reverse wrap;
sb-nested-flex-reverse-row-no-wrap	display: flex; flex-flow: row-reverse nowrap;
sb-nested-flex-column-wrap	display: flex; flex-flow: column wrap;
sb-nested-flex-column-nowrap	display: flex; flex-flow: column nowrap;
sb-nested-flex-reverse-column-wrap	display: flex; flex-flow: column-reverse wrap;
sb-nested-flex-reverse-column-no-wrap	display: flex; flex-flow: column-reverse nowrap;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-nested-flex-column-nowrap">
    <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>

wrap-reverse and flex-inline

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

It works only for <a>, <div>, <li> and <ul> items.

Class	Meaning for all items
sb-nested-flex-inline	display: inline-flex;
sb-nested-flex-reverse-wrap	flex-wrap: wrap-reverse;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-nested-flex-column-wrap sb-nested-flex-reverse-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>

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-reverse-row-wrap sb-nested-flex-column-wrap sb-nested-flex-reverse-wrap"> 
    <div><span>This div is a flexbox item and a flexbox container as well</span></div>
    <div class="sb-flex-row-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>

justify-content rule

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

It works only for <a>, <div>, <li> and <ul> items.

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

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-nowrap sb-nested-flex-row-nowrap sb-nested-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

It works only for <a>, <div>, <li> and <ul> items.

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

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-nowrap sb-nested-flex-row-nowrap sb-nested-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

It works only for <a>, <div>, <li> and <ul> items.

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

Example:

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