hhfa1990 / mini-flex-helper

Mini Flex Helper

List of classes:

• flex: obligatory
• h: show children in horizontal
• v: show children in vertical
• xl: horizontal left align
• xc: horizontal center align
• xr: horizontal right align
• yt: vertical top align
• yc: vertical center align
• yb: vertical bottom align

Examples:

Horizontal left-top

<div class="flex h xl yt">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal center-top

<div class="flex h xc yt">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal right-top

<div class="flex h xr yt">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal left-center

<div class="flex h xl yc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal center-center

<div class="flex h xc yc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal right-center

<div class="flex h xr yc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal left-bottom

<div class="flex h xl yb">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal center-bottom

<div class="flex h xc yb">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Horizontal right-bottom

<div class="flex h xr yb">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical left-top

<div class="flex v xl yt">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical center-top

<div class="flex v xc yt">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical right-top

<div class="flex h xr yt">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical left-center

<div class="flex v xl yc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical center-center

<div class="flex v xc yc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical right-center

<div class="flex v xr yc">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical left-bottom

<div class="flex h xl yb">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical center-bottom

<div class="flex v xc yb">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Vertical right-bottom

<div class="flex v xr yb">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>