Flexbox Positioning
Parent container setting its children along its cross axis
<div class="flex flex-col lg:flex-row items-start justify-center w-full bg-gray-200 font-nunito_bold h-48">
<a class="bg-gray-400 hover:bg-gray-800 text-gray-700 hover:text-white text-center rounded py-2 mx-2 mb-2 lg:mb-0 w-48"
href="/">
One
</a>
<a class="bg-gray-400 hover:bg-gray-800 text-gray-700 hover:text-white text-center rounded py-2 mx-2 mb-2 lg:mb-0 w-48"
href="/">
Two
</a>
<a class="bg-gray-400 hover:bg-gray-800 text-gray-700 hover:text-white text-center rounded py-2 mx-2 mb-2 lg:mb-0 w-48"
href="/">
Three
</a>
</div>
items-start
items-center
items-end
items-stretch
items-baseline
Parent container setting its children along its main axis
<div class="flex flex-col lg:flex-row items-center justify-start w-full bg-gray-200 font-nunito_bold h-48">
<a class="bg-gray-400 hover:bg-gray-800 text-gray-700 hover:text-white text-center rounded py-2 mx-2 mb-2 lg:mb-0 w-48"
href="/">
One
</a>
<a class="bg-gray-400 hover:bg-gray-800 text-gray-700 hover:text-white text-center rounded py-2 mx-2 mb-2 lg:mb-0 w-48"
href="/">
Two
</a>
<a class="bg-gray-400 hover:bg-gray-800 text-gray-700 hover:text-white text-center rounded py-2 mx-2 mb-2 lg:mb-0 w-48"
href="/">
Three
</a>
</div>
justify-start
justify-end
justify-center
justify-between
justify-around
justify-evenly
Child setting its own position along its parent container's cross axis
<div class="flex items-center w-full font-nunito_regular bg-gray-200 h-72">
<div class="flex self-start bg-gray-400 py-10 px-16 mx-auto" href="">
One
</div>
</div>
self-start
One
self-center
One
self-end
One
self-auto
One
self-stretch
One