• Introduction
    • Installation
    • Customization
    • Tailwind differences
    • SCSS
    • Preflight
    • Grid System
    • Aspect Ratio
    • Display
    • Isolation
    • Object Fit
    • Overflow
    • Position
    • Top / Right / Bottom / Left
    • Visibility
    • Z-Index
    • Flex Direction
    • Flex Wrap
    • Flex
    • Flex Grow
    • Flex Shrink
    • Order
    • Gap
    • Justify Content
    • Justify Items
    • Justify Self
    • Align Content
    • Align Items
    • Align Self
    • Place Content
    • Place Items
    • Place Self
    • Margin
    • Padding
    • Width
    • Min Width
    • Max Width
    • Height
    • Min Height
    • Max Height
    • Font Size
    • Font Style
    • Font Weight
    • Text Align
    • Text Color
    • Text Decoration
    • Text Transform
    • Text Overflow
    • Vertical Align
    • Whitespace
    • Background Color
    • Border Color
    • Border Radius
    • Border Width
    • Opacity
    • Cursor
    • User Select

Flexbox & Grid

Flex

Utilities for controlling how flex items both grow and shrink.

Quick reference

ClassProperties
flex-1
flex: 1 1 0%;
flex-auto
flex: 1 1 auto;
flex-initial
flex: 0 1 auto;
flex-content
flex: 0 0 auto;
flex-fill
flex: 1 0 auto;
flex-none
flex: none;
Flex GridFlex Wrap
Flex GridFlex Grow

Made with ❤️ by Outloud