Grid And Flexbox

Place Content

Style syntax for setting align-content and justify-content at the same time.

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

Overview [sr-only]

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 in different states using selectors, media queries, etc.

<div class="place-content:baseline:hover place-content:baseline@sm place-content:baseline@dark place-content:baseline@print"></div>
PREVIOUS
Order

Style syntax for changing the order of item in flex or grid container.

NEXT
Place Items

Style syntax for setting align-items and justify-items at the same time.

MIT License © Aoyue Design LLC.