Simple Flex CSS is a basic flexbox framework for building all the layouts.

github / download

Flexbox Grid >

Examples:

<div class="flex">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex flex-col">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex justify-end">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex justify-center">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex justify-between">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex justify-around">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex align-center">
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="flex">
  <div class="one-child"></div>
  <div></div>
  <div></div>
</div>

<div class="flex">
  <div class="one-child"></div>
  <div class="one-child"></div>
  <div class="one-child"></div>
</div>

<div class="flex">
  <div class="two-child"></div>
  <div class="one-child"></div>
  <div class="one-child"></div>
</div>

<div class="flex flex-wrap">
  <div class="half-child"></div>
  <div class="half-child"></div>
  <div class="half-child"></div>
  <div class="half-child"></div>
  <div class="half-child"></div>
  <div class="half-child"></div>
</div>

<div class="flex flex-wrap rows-center">
  <div class="half-child half-child-mobile"></div>
  <div class="half-child half-child-mobile"></div>
  <div class="half-child half-child-mobile"></div>
  <div class="half-child half-child-mobile"></div>
</div>

made by andrew