Skip to main content
Design System

Justify Contents

Basic

<!-- justify content center -->
<div class="u-justify-content-center"><p>Justify Content Center</p></div>
	
<!-- justify content start -->
<div class="u-justify-content-start"><p>Justify Content Start</p></div>

<!-- justify content end -->
<div class="u-justify-content-end"><p>Justify Content End</p></div>

<!-- justify content stretch -->
<div class="u-justify-content-stretch"><p>Justify Content Stretch</p></div>

Back to top

Flexbox

<!-- justify content flex start -->
<div class="u-justify-content-flex-start"><p>Justify Content Flex-Start</p></div>

<!-- justify content flex end -->
<div class="u-justify-content-flex-end"><p>Justify Content Flex-End</p></div>

Back to top

Distributed

<!-- justify content space between -->
<div class="u-justify-content-space-between"><p>Justify Content Space-Between</p></div>

<!-- justify content space around -->
<div class="u-justify-content-space-around"><p>Justify Content Space-Around</p></div>
	
<!-- justify content space evenly -->
<div class="u-justify-content-space-evenly"><p>Justify Content Space-Evenly</p></div>

Back to top

Baseline

<!-- justify content baseline -->
<div class="u-justify-content-baseline"><p>Justify Content Baseline</p></div>

Back to top

Globals

<!-- justify content inherit -->
<div class="u-justify-content-inherit"><p>Justify Content Inherit</p></div>
	
<!-- justify content initial -->
<div class="u-justify-content-initial"><p>Justify Content Initial</p></div>
	
<!-- justify content unset -->
<div class="u-justify-content-unset"><p>Justify Content Unset</p></div>

Back to top