Flexbox

Flex

Utilities for controls how flex items grow, shrink and basis.

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

class	css
flex-initial	flex: 0 1 auto
flex-zero	flex: 1 1 0%
flex-full	flex: 1 100%
flex-auto	flex: 1 1 auto
flex-none	flex: none

class	css
flex-1	flex: 1
flex-2	flex: 2
flex-3	flex: 3
flex-4	flex: 4
flex-5	flex: 5
flex-6	flex: 6
flex-7	flex: 7
flex-8	flex: 8
flex-9	flex: 9
flex-10	flex: 10
flex-11	flex: 11
flex-12	flex: 12

Usage

flex: OFF

<div class="flex">
  <div> ... </div>
  <div> ... </div>
  <div> ... </div>
</div>

HTML

.dummy-parent {
  @extend
    .flex;
}

SCSS