Simple flex is a utility built to ease layout development with flex box It has classes made to simplify layout development using classes only
Just add sf class to the element and then add any of the alignment classes.
for example:
<nav class="sf msb">
<a class=""></a>
<a class=""></a>
...
</nav>Add the following classes for advanced use:
column- Convert the container a columninline- Convert the container to a inline-flex elementwrap- make the elements in the container wrap when there is not enough space
Simple flex gives you a list of simple classes to align your content in the container
t - top |l - left
|
|
---------------------------------------
|
m - middle | c - center
|
---------------------------------------
|
|
b - bottom | r - right
Using combinations of those classes you can align the content of the container in any direction. Simple flex also has built in combinations of all the alignment classes allowing you to easily control positioning of the content in your container
| |
tl - top left | tc - top center | tr - top right
| |
------------------------------------------------------------------
| |
ml - middle left | mc - middle center | mr - middle right
| |
------------------------------------------------------------------
| |
bl - bottom left | bc - bottom center | br - bottom right
| |
Simple flex also supports advanced flex based alignment:
.sb - space-between
.tsb - top space-between
.msb - middle space-between
.bsb - bottom space-between
.sa - space-around
.tsa - top space-around
.msa - middle space-around
.bsa - bottom space-around
Simple flex has support for basic grids, it has an optional 12 columns grid, use classes c1-c12 for column width:
<div class="sf">
<div class="c6">column 1/2</div>
<div class="c6">column 1/2</div>
</div>
<div class="sf">
<div class="c4">column 1/3</div>
<div class="c4">column 1/3</div>
<div class="c4">column 1/3</div>
</div>
<div class="sf">
<div class="c4">column 1/3</div>
<div class="c8">column 2/3</div>
</div>
<div class="sf">
<div class="c3">column 1/4</div>
<div class="c3">column 1/4</div>
<div class="c3">column 1/4</div>
<div class="c3">column 1/4</div>
</div>| | |
| column 1/2 | column 1/2 |
| | |
-------------------------------------------------------------
| | | |
| column 1/3 | column 1/3 | column 1/3 |
| | | |
-------------------------------------------------------------
| | |
| column 1/3 | column 2/3 |
| | |
-------------------------------------------------------------
| | | | |
| column 1/4 | column 1/4 | column 1/4 | column 1/4 |
| | | | |
Simple text alignment helpers are also available
<div class="sa-left">left</div>
<div class="sa-center">center</div>
<div class="sa-right">right</div>Simple Spacing for elements
Available spacing modes:
margin / padding
Built in sizes:
none: 0rem
xs: 0.333rem
sm: 0.666rem
md: 1rem
lg: 1.333rem
xl: 1.666rem
xxl: 2rem
sides:
all / top / right / bottom / left / tb (top & bottom) / lr (left & right)
example:
<div class="padding-all-sm">small padding from all sides</div>
<div class="margin-lr-xs">extra small margin from left and right</div>
<div class="padding-top-xs padding-bottom-small">extra small padding from top and small from bottom</div>
<div class="margin-children-all-xs">Gives all direct children BUT THE LAST spacing</div>Simply import the css file to your project and start using Simple flex
Development:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dcohenb/simple-flex@master/dist/simple-flex.css">
Production:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dcohenb/[email protected]/dist/simple-flex.css">MIT
Copyright (c) 2017-present, Daniel Cohen
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent