• f-align-start Aligns to the start of the parent element.
• f-align-center Aligns center the parent element.
• f-align-end Aligns to the end of the parent element.

<div f-align-end f-row f-p-30px f-h-90px f-bg-orange-400>
 <div f-h-50px f-w-50px f-bg-white f-box-shadow-1></div>
</div>

Use justify to stretch, spread and control the format of children elements.

• f-justify-center
• f-justify-start.
• f-justify-between
• f-justify-around

f-justify-between

<div f-align-end f-row f-bg-orange-50 f-p-20px f-justify-between f-m-t-20px>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-300 f-p-20px></div>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-400 f-p-20px></div>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-500 f-p-20px></div>
</div>

f-justify-around

<div f-align-end f-row f-bg-orange-50 f-p-20px f-justify-around f-m-t-20px>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-300 f-p-20px></div>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-400 f-p-20px></div>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-500 f-p-20px></div>
</div>

f-justify-stretch

<div f-align-end f-row f-bg-orange-50 f-p-20px f-justify-stretch f-m-t-20px>
 <div  f-h-30px f-w-min-20 f-w-max-100  f-m-r-10px f-bg-orange-300 f-p-20px></div>
 <div  f-h-30px f-w-min-20 f-w-max-100  f-m-r-10px f-bg-orange-400 f-p-20px></div>
 <div  f-h-30px f-w-min-20 f-w-max-100  f-m-r-10px f-bg-orange-500 f-p-20px></div>
</div>

f-justify-center

<div f-align-end f-row f-bg-orange-50 f-p-20px f-justify-center f-m-t-20px>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-300 f-p-20px></div>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-400 f-p-20px></div>
 <div  f-h-30px f-w-20px f-m-r-10px f-bg-orange-500 f-p-20px></div>
</div>

Rows and columns are targeted with the f-row and f-column

Flexbox Row with variable widths

 <div  f-bg-blue-100 f-row f-p-30px f-wrap f-m-t-20px>
  <div f-w-max-20px f-w-min-10px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-100 f-w-min-20px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-20px f-w-min-10px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-100 f-w-min-20px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-20px f-w-min-10px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-100 f-w-min-20px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-20px f-w-min-10px f-w-30px f-grow f-shrink f-h-100px></div>
  <div f-w-max-100 f-w-min-20px f-w-30px f-grow f-shrink f-h-100px></div>
 </div>

Flexbox Column with variable widths

 <div  f-bg-blue-100  f-column f-p-30px f-wrap f-m-t-20px>
  <div  f-m-b-10px f-h-max-10px f-h-min-1px f-h-30px f-grow f-shrink f-w-100px></div>
  <div  f-m-b-10px f-h-max-100 f-h-min-20px f-h-30px f-grow f-shrink f-w-100px></div>
  <div  f-m-b-10px f-h-max-10px f-h-min-1px f-h-30px f-grow f-shrink f-w-100px></div>
  <div  f-m-b-10px f-h-max-100 f-h-min-20px f-h-30px f-grow f-shrink f-w-100px></div>
</div>

Only want the flex features of Oh-flex?

<link href="https://unpkg.com/oh-flex/lib/chunks/_flex.css" rel="stylesheet" />