Log In Sign Up
Home›Docs›Basic›Flex Layout

Flex Layout

Category: Basic
Flexible layout, also known as flex layout, is the mainstream layout method for web pages today. It solves the collapse issue of float layouts and the 4px gap problem of inline-block elements. Most im...

Features

Flexible layout (flex layout) is currently the most popular layout method. This refers to fixed layouts for entire pages or sections (for repeating child elements, use table or grid layouts instead).

The framework's flex layout meets most requirements with these features:

  1. Supports both horizontal (_row) and vertical (_col) flex layouts
  2. Supports standard flex behavior via _flex[-*] classes (e.g. _row _flex-2 sets flex:2)
  3. Supports proportional layouts using _own-* (e.g. _row _own-3 takes 3/24 of width)
  4. Supports equal division layouts using _avg[-*] (e.g. _row _avg-3 divides into 3 equal columns)
  5. Supports gaps between elements via _g[-*] (e.g. _row _g-sm for 12px gaps)
  6. Automatic column adjustment across devices

Usage

Combine _row and _flex classes for horizontal flex layouts:

  • Output
  • HTML
  • Flex content
    Flex content
    Non-flex content
  •

Combine _col and _flex classes for vertical flex layouts:

  • Output
  • HTML
  • Flex content
    Flex content
    Non-flex content
  •

Flex-* Layout Construction

The _flex-* class accepts values 0-24. _flex-0 sets flex:0. Child elements won't overflow regardless of values.

  • Output
  • HTML
  • Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
  •

Own-* Layout Construction

_own-* calculates child sizes by percentage. Ensure row/column totals equal 24 to prevent overflow. All siblings should use _own-*.

Values 0-24. _own-0 sets width/height to 0.

  • Output
  • HTML
  • Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
  •

Avg-* Layout Construction

_avg-* divides parent into equal parts. Ensure value × child count = 24 to prevent overflow.

Values 1-24. _avg-1 sets child width/height to 100%.

  • Output
  • HTML
  • Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
  •

Gap Classes

Unlike grid, flex gaps use the gap property - horizontal for _row, vertical for _col.

Class Name Description Example
_g 1.4rem gap (same as _g-sm) <div class="_row _g"></div>
_g-0 No gap <div class="_row _g-0"></div>
_g-1 1px gap <div class="_row _g-1"></div>
_g-2 2px gap <div class="_row _g-2"></div>
_g-3 3px gap <div class="_row _g-3"></div>
_g-xxs 0.4rem gap <div class="_row _g-xxs"></div>
_g-xs 0.8rem gap <div class="_row _g-xs"></div>
_g-sm 1.4rem gap <div class="_row _g-sm"></div>
_g-md 2.4rem gap <div class="_row _g-md"></div>
_g-lg 3.2rem gap <div class="_row _g-lg"></div>
_g-xl 4rem gap <div class="_row _g-xl"></div>
_g-xxl 4.8rem gap <div class="_row _g-xxl"></div>
  • Output
  • HTML
  • Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
    Flex content(No.01)
    Flex content(No.02)
    Flex content(No.03)
    Flex content(No.04)
  •

Vertical Flex Layout

Use for equal height divisions or maximizing vertical space:

  • Output
  • HTML
  • Flex content
    Non-flex content
  •

Responsive Behavior

Built-in classes _xxs-* to _xxl-* (values 1-24) enable automatic column adjustment:

First Row Only

Add _clip to show only first row in responsive layouts.

  • Output
  • HTML
    • No.01
    • No.02
    • No.03
    • No.04
    • No.05
    • No.06
    • No.07
    • No.08
  •

The framework also provides _hide-clip - hidden by default but shown in the last item of first row on mobile.

  • Output
  • HTML
    • No.01
    • No.02
    • No.03
      Visible on phone
    • No.04
    • No.05
    • No.06
    • No.07
    • No.08
  •

Inline styles override responsive classes - manual adjustments required.

Common Classes

Class Name Description Example
_row Horizontal flex container (overrides child display) -
_col Vertical flex container (overrides child display) -
_flex Flex child (equal division of remaining space) Two _flex children = 50% each
_flex-none Converts to non-flex element (flex:none) -
_flex-* Flex child (values 0-24 for space allocation) _flex-2 + _flex-4 = 2/6 and 4/6 of remaining space
_own-* Flex child (values 0-24 for total space allocation) _own-2 = 2/24 of total width/height
_avg-* Flex parent (values 1-24 for equal divisions) _avg-4 divides parent into 4 equal parts

Prev
Grid Layout
17 days ago

New Launch: 20% Off All Products

Unlock all examples and development resources