Flexbox

Flex Basis

Utilities for resizing width and height in the proportion of an element.

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
proportion-scale-2	scale: 2
proportion-scale-3	scale: 3
proportion-scale-4	scale: 4
proportion-scale-5	scale: 5
proportion-scale-6	scale: 6
proportion-scale-7	scale: 7
proportion-scale-8	scale: 8
proportion-scale-9	scale: 9
proportion-scale-10	scale: 10

Usage

Proportion scale set to 2, 3 and 4 for width-4 and height-4 utilities.

Scale 2x

Scale 3x

Scale 4x

<div class="proportion-scale-3 ... width-4 height-4">
  ...
</div>

HTML

.dummy {
  @extend
    .proportion-scale-3,
    .width-4,
    .height-4;
}

SCSS