Skip to content
uStatic CSS

Flexbox

Module for flexbox layout — flexible alignment and distribution of elements.

Basic Classes

Section titled “Basic Classes”

Container

Section titled “Container”
<div class="flex">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>


<div class="flex-col">
  <div>Item 1</div>
  <div>Item 2</div>
</div>


<div class="flex-row">
  <div>Item 1</div>
  <div>Item 2</div>
</div>


<div class="flex-wrap">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Justify Content

Section titled “Justify Content”
ClassCSSDescription
justify-startjustify-content: flex-startAlign to start
justify-centerjustify-content: centerAlign to center
justify-endjustify-content: flex-endAlign to end
justify-betweenjustify-content: space-betweenSpace between
justify-aroundjustify-content: space-aroundSpace around
justify-evenlyjustify-content: space-evenlyEvenly distributed

Align Items

Section titled “Align Items”
ClassCSSDescription
items-startalign-items: flex-startAlign to top
items-centeralign-items: centerAlign to center
items-endalign-items: flex-endAlign to bottom
items-baselinealign-items: baselineAlign to baseline
items-stretchalign-items: stretchStretch to fill

See Also

Section titled “See Also”