Flex Layouts

A few flex classes for simple scenarios. In some cases it is better to write custom css rather than use these strategies. Custom solutions means less markup in the html and more control (like setting gap and other flex options).

Justify Content to Center or End

All content defaults to justify left or justify start (left edge). Here's a method for justifying an element to the center or end (right edge) on the fly. Classes: flex_justify-content-center and flex_justify-content-end.

Default

Justify center

Justify end

<div class="flex">
	<p class="alert alert_light">Default</p>
</div>

<div class="flex flex_justify-content-center">
	<p class="alert alert_light">Justify center</p>
</div>

<div class="flex flex_justify-content-end">
	<p class="alert alert_light">Justify End</p>
</div>

Align Items to Center or End

All items default to align start (top). Here's a method for aligning items center or end (bottom). Classes: flex_align-items-center and flex_align-items-end.

Default

Align center

Align end

<div class="flex">
   <p class="alert alert_light height-100">Default</p>
   <p class="alert alert_light height-200">Default</p>
   <p class="alert alert_light height-150">Default</p>
</div>

<div class="flex flex_align-items-center">
   <p class="alert alert_light height-100">Align center</p>
   <p class="alert alert_light height-200">Align center</p>
   <p class="alert alert_light height-150">Align center</p>
</div>

<div class="flex flex_align-items-end">
   <p class="alert alert_light height-100">Align end</p>
   <p class="alert alert_light height-200">Align end</p>
   <p class="alert alert_light height-150">Align end</p>
</div>