Flexbox Container Section

Use these classes to build a flexbox container faster

flex-direction rule and flex-wrap rule

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

Class	Meaning
sb-flex-row-wrap	display: flex; flex-flow: row wrap;
sb-flex-row-nowrap	display: flex; flex-flow: row nowrap;
sb-flex-reverse-row-wrap	display: flex; flex-flow: row-reverse wrap;
sb-flex-reverse-row-nowrap	display: flex; flex-flow: row-reverse nowrap;
sb-flex-column-wrap	display: flex; flex-flow: column wrap;
sb-flex-column-nowrap	display: flex; flex-flow: column nowrap;
sb-flex-reverse-column-wrap	display: flex; flex-flow: column-reverse wrap;
sb-flex-reverse-column-nowrap	display: flex; flex-flow: column-reverse nowrap;

Example:

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

wrap-reverse and flex-inline

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

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

Class	Meaning
sb-flex-inline	display: inline-flex;
sb-flex-reverse-wrap	flex-wrap: wrap-reverse;

Examples:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-nowrap sb-flex-inline">
</div>

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-flex-reverse-wrap">
</div>

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-wrap sb-flex-inline sb-flex-reverse-wrap">
</div>

justify-content rule

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

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

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-reverse-row-nowrap sb-jc-flex-space-ad">
    <div><div>
</div>

align-items rule

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

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

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-reverse-row-nowrap sb-ai-center">
    <div><div>
</div>

align-content rule

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

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

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-reverse-row-nowrap sb-ac-center">
    <div><div>
</div>

flex rule

Add these classes to change items dimension

flex-grow:1 and flex-shrink:1

Class	Meaning
sb-each-item-is-100-percent sb-each-item-is-a-hundred-percent	flex: 1 1 100%;
sb-each-item-is-90-percent	flex: 1 1 90%
sb-each-item-is-80-percent	flex: 1 1 80%;
sb-each-item-is-70-percent	flex: 1 1 70%;
sb-each-item-is-60-percent	flex: 1 1 60%;
sb-each-item-is-50-percent sb-each-item-a-half	flex: 1 1 50%;
sb-each-item-is-40-percent	flex: 1 1 40%;
sb-each-item-is-one-third	flex: 1 1 33.3333%;
sb-each-item-is-30-percent	flex: 1 1 30%;
sb-each-item-is-25-percent sb-each-item-is-a-quarter	flex: 1 1 25%;
sb-each-item-is-20-percent sb-each-item-is-a-fifth	flex: 1 1 20%;
sb-each-item-is-a-sixth	flex: 1 1 16.6666%;
sb-each-item-is-a-seventh	flex: 1 1 14.2857%;
ssb-each-item-is-an-eighth	flex: 1 1 12.50%;
sb-each-item-is-a-ninth	flex: 1 1 11.11%;
sb-each-item-is-10-percent sb-each-item-is-a-tenth	flex: 1 1 10%;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-nowrap sb-each-item-is-a-sixth-percent">
    <div>item<div>
    <div>item<div>
    <div>item<div>
</div>

flex-grow:0 and flex-shrink:1

Class	Meaning
sb-each-item-is-100-percent-no-grow sb-each-item-is-a-hundred-percent-no-grow	flex: 0 1 100%;
sb-each-item-is-90-percent-no-grow	flex: 0 1 90%
sb-each-item-is-80-percent-no-grow	flex: 0 1 80%;
sb-each-item-is-70-percent-no-grow	flex: 0 1 70%;
sb-each-item-is-60-percent-no-grow	flex: 0 1 60%;
sb-each-item-is-50-percent-no-grow sb-each-item-a-half-no-grow	flex: 0 1 50%;
sb-each-item-is-40-percent-no-grow	flex: 0 1 40%;
sb-each-item-is-one-third-no-grow	flex: 0 1 33.3333%;
sb-each-item-is-30-percent-no-grow	flex: 0 1 30%;
sb-each-item-is-25-percent-no-grow sb-each-item-is-a-quarter-no-grow	flex: 0 1 25%;
sb-each-item-is-20-percent-no-grow sb-each-item-is-a-fifth-no-grow	flex: 0 1 20%;
sb-each-item-is-a-sixth-no-grow	flex: 0 1 16.6666%;
sb-each-item-is-a-seventh-no-grow	flex: 0 1 14.2857%;
sb-each-item-is-an-eighth-no-grow	flex: 0 1 12.50%;
sb-each-item-is-a-ninth-no-grow	flex: 0 1 11.11%;
sb-each-item-is-10-percent-no-grow sb-each-item-is-a-tenth-no-grow	flex: 0 1 10%;

Example:

<!-- This is a flexbox container -->
<div class="sb-flex-reverse-row-nowrap sb-each-item-is-a-sixth-percent-no-grow">
    <div>item<div>
    <div>item<div>
    <div>item<div>
</div>