Syntax

Place Content

Setting align-content and justify-content at the same time.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
place-content:align-content|justify-contentplace-content: align-content justify-content;
place-content:normalplace-content: normal;
place-content:baselineplace-content: baseline;
place-content:centerplace-content: center;
place-content:stretchplace-content: stretch;
place-content:startplace-content: start;
place-content:endplace-content: end;
place-content:flex-startplace-content: flex-start;
place-content:flex-endplace-content: flex-end;
place-content:space-aroundplace-content: space-around;
place-content:space-betweenplace-content: space-between;
place-content:space-evenlyplace-content: space-evenly;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="place-content:baseline:hover place-content:baseline@sm place-content:baseline@dark place-content:baseline@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.