Press
/
to search

Flexbox

Align Content

Utilities for controls how lines are positioned in multi-line flex containers.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
content-startalign-content: flex-start
content-centeralign-content: center
content-endalign-content: flex-end
content-betweenalign-content: space-between
content-aroundalign-content: space-around
content-stretchalign-content: stretch

Usage

1
2
3
4
5
6
content-start
<!-- parent -->
<div class="flex content-start">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>
HTML
.dummy {
  @extend
    .flex,
    .content-start;
}
SCSS
1
2
3
4
5
6
content-center
<!-- parent -->
<div class="flex content-center">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>
HTML
.dummy {
  @extend
    .flex,
    .content-center;
}
SCSS
1
2
3
4
5
6
content-end
<!-- parent -->
<div class="flex content-end">
  <!-- child -->
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>
HTML
.dummy {
  @extend
    .flex,
    .content-end;
}
SCSS
1
2
3
4
5
6
content-between
.dummy {
  @extend
    .flex,
    .content-between;
}
SCSS
1
2
3
4
5
6
content-around
.dummy {
  @extend
    .flex,
    .content-around;
}
SCSS
1
2
3
4
5
6
content-stretch
.dummy {
  @extend
    .flex,
    .content-stretch;
}
SCSS