Skip to main content
MybringDesign System

Align

Position flex children on the cross axis

How to use

Flexbox has two axes: main and cross. The cross axis crosses the flex-direction.

Align items
Class Declaration Usage
align-ifs align-items: flex-start; Parent Positions the flex children at the start of the cross axis.
align-ife align-items: flex-end; Parent Positions the flex children at the end of the cross axis.
align-ic align-items: center; Parent Centers the flex children on the cross axis.
align-ib align-items: baseline; Parent Positions the flex children on their baseline.
align-is align-items: stretch; Parent Stretches flex children to fill the parent's cross axis. This is the default.
Align self, overrides the parent’s align-items setting
Class Declaration Usage
align-sfs align-self: flex-start; Child Positions the flex child to the start of the parent's cross axis.
align-sfe align-self: flex-end; Child Positions the flex child to the end of the parent's cross axis.
align-sc align-self: center; Child Centers the flex child on the center of the parent's cross axis.
align-sb align-self: baseline; Child Positions the flex child on the baseline.
align-ss align-self: stretch; Child Stretches the flex child to fill the parent's cross axis.
Align content
Class Declaration Usage
align-cfs align-content: flex-start; Parent Packs children to the start of the parent along the cross-axis. This is the default.
align-cfe align-content: flex-end; Parent Packs children to the end of the parent along the cross-axis.
align-cc align-content: center; Parent Packs children in the center of the parent along the cross-axis.
align-csa align-content: space-around; Parent Distributes multiple lines along the cross-axis with equal space between each and half that at start and end.
align-csb align-content: space-between; Parent Distributes multiple lines along the cross-axis with equal space between each.
align-cse align-content: space-evenly; Parent Distributes multiple lines along the cross-axis with equal space around each.
align-cs align-content: stretch; Parent Stretches lines to take up the remaining space along the cross-axis.

Examples align items

flex-start

A – – – – – – – – – – – – – –
B
C
<div class="bg-gray4 paxs flex align-ifs">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

flex-end

A – – – – – – – – – – – – – –
B
C
<div class="bg-gray4 paxs flex align-ife">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

center

A – – – – – – – – – – – – – –
B
C
<div class="bg-gray4 paxs flex align-ic">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

baseline

A – – – – – – – – – – – – – –
B
C
<div class="bg-gray4 paxs flex align-ib">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox lh-solid">B</div>
  <div class="examplebox">C</div>
</div>

stretch / default

A – – – – – – – – – – – – – –
B
C
<div class="bg-gray4 paxs flex align-is">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

Examples align self

flex-start

A
B
C
<div class="exh8 bg-gray4 paxs flex">
  <div class="examplebox">A</div>
  <div class="examplebox align-sfs">B</div>
  <div class="examplebox">C</div>
</div>

flex-end

A
B
C
<div class="exh8 bg-gray4 paxs flex">
  <div class="examplebox">A</div>
  <div class="examplebox align-sfe">B</div>
  <div class="examplebox">C</div>
</div>

center

A
B
C
<div class="exh8 bg-gray4 paxs flex">
  <div class="examplebox">A</div>
  <div class="examplebox align-sc">B</div>
  <div class="examplebox">C</div>
</div>

baseline

A
B
C
<div class="bg-gray4 paxs flex">
  <div class="examplebox">A</div>
  <div class="examplebox lh-solid align-sb">B</div>
  <div class="examplebox">C</div>
</div>

stretch

A
B
C
<div class="exh8 bg-gray4 paxs flex">
  <div class="examplebox">A</div>
  <div class="examplebox align-ss">B</div>
  <div class="examplebox">C</div>
</div>

Examples align content

flex-start

A
B
C
<div class="exh8 bg-gray4 paxs flex flex-wrap align-cfs">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

flex-end

A
B
C
<div class="exh8 bg-gray4 paxs flex flex-wrap align-cfe">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

center

A
B
C
<div class="exh8 bg-gray4 paxs flex flex-wrap align-cc">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>

space-around

A – – – – – – – – – – – – – – – – –
B – – – – – – – – – – – –
C
<div class="exh12 bg-gray4 paxs flex flex-wrap align-csa">
  <div class="examplebox">A – – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – – – – – – – –</div>
  <div class="examplebox">C</div>
</div>

space-between

A – – – – – – – – – – – – – – – – –
B – – – – – – – – – – – –
C
<div class="exh12 bg-gray4 paxs flex flex-wrap align-csb">
  <div class="examplebox">A – – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – – – – – – – –</div>
  <div class="examplebox">C</div>
</div>

space-evenly

A – – – – – – – – – – – – – – – – –
B – – – – – – – – – – – –
C
<div class="exh12 bg-gray4 paxs flex flex-wrap align-cse">
  <div class="examplebox">A – – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – – – – – – – –</div>
  <div class="examplebox">C</div>
</div>

stretch

A
B
C
<div class="exh8 bg-gray4 paxs flex align-cs">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>