Flexbox

Flex Basis

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

Variant

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

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-12 and height-12 utilities.

scale 2x

scale 3x

scale 4x

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

HTML

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

SCSS