Unlocking Flexbox Secrets: Advanced Layout Techniques and Calculations

Flexbox Overview

Flexbox is one of the most popular web layout methods, offering great flexibility for UI design. However, its flexibility hides many details that can cause confusion or bugs if not fully understood.

Terminology and Concepts

Key terms include main axis (the direction of flex-direction) and cross axis . These axes are affected not only by flex-direction but also by CSS writing mode ( writing-mode), direction ( direction) and the HTML dir attribute.

Block Axis and Inline Axis

The CSS Box Alignment Module Level 3 introduces block axis and inline axis . The block axis follows the block flow (e.g., paragraphs) and crosses the inline axis. The inline axis follows the inline flow (e.g., text direction) and is horizontal for Latin scripts.

In Flexbox, the block axis corresponds to the cross axis, and the inline axis corresponds to the main axis.

Logical Properties

Logical properties such as block-start, block-end, inline-start, and inline-end map to physical properties ( top, right, bottom, left) but are not interchangeable. Logical properties are also influenced by writing-mode, direction, and dir.

Free Space in Flex Containers

When the total size of flex items is less than the container size, the remaining space is called positive free space . When the total size exceeds the container, the deficit is negative free space (or overflow).

Flex Container and Flex Items

Set display: flex or display: inline-flex on an element to make it a flex container. Its children become flex items, including text nodes and pseudo‑elements.

Direction and Wrapping

flex-direction

defines the main‑axis direction (default row). Values row-reverse, column, and column-reverse change the layout order without altering the DOM. flex-wrap controls whether items wrap onto new lines. Values nowrap, wrap, and wrap-reverse affect line breaking.

The shorthand flex-flow combines flex-direction and flex-wrap.

Main‑Axis Alignment

justify-content

distributes free space along the main axis. Six values are defined: flex-start, flex-end, center, space-between, space-around, and space-evenly. The last three differ in how they allocate space at the ends and between items.

Cross‑Axis Alignment

align-items

aligns items on the cross axis. Its default is stretch, which stretches items to fill the container only when they have an explicit size. align-self overrides align-items for a single item. Values include auto, flex-start, flex-end, center, baseline, and stretch.

Multi‑Line Alignment

align-content

aligns entire lines when there are multiple rows (i.e., when flex-wrap is not nowrap). It behaves similarly to justify-content but on the cross axis, with an additional stretch option.

Spacing

The gap property sets the spacing between flex items, but does not affect the space between items and the container edges.

Flex Item Sizing

The flex shorthand sets three sub‑properties: flex-grow, flex-shrink, and flex-basis. Their initial values are 0, 1, and auto respectively.

flex-grow

flex-grow

determines how much a flex item expands to fill positive free space. The growth amount is proportional to the sum of all flex-grow values.

/* Example */
.container { width: 80vw; display: flex; }
.item { width: 10vw; }
/* Item 1: flex-grow 0, Item 2: 1, Item 3: 2, Item 4: 3 */

When the total flex-grow is less than 1, the items only consume a fraction of the remaining space.

flex-shrink

flex-shrink

determines how much an item contracts when the total size exceeds the container (negative free space). The shrink amount is proportional to the sum of all flex-shrink values.

/* Example */
.container { width: 40vw; display: flex; }
.item { width: 15vw; }
/* Item 1: flex-shrink 0, Item 2: 1, Item 3: 2, Item 4: 3 */

If the sum of flex-shrink is less than 1, the container may still overflow.

flex-basis

flex-basis

defines the initial main‑axis size of a flex item before free‑space distribution. If not specified, it falls back to width (or inline-size), and ultimately to the content size.

The final size is also constrained by min-width / max-width (or their logical equivalents). The precedence rules are:

If width > max-width, max-width wins.

If width < min-width, min-width wins.

If min-width > max-width, min-width wins.

When both width and flex-basis are set, flex-basis takes precedence.

Ordering and Reversing Items

The order property assigns an integer to each item; items with larger values appear later. This allows reordering without changing the DOM.

Margins

Setting margin: auto on a flex item can push it to the start or end of the main axis, providing a simple way to align a single item.

Practical Case: Padding and Auto Width

When building button‑like components with inline-flex, set a min-width and height on the container. Use a fixed width for static elements (e.g., a label), a thin border or fixed width for dividers, and flex: 1 with min-width: 0 and horizontal padding for the flexible price area.

.flex__container { display: inline-flex; min-width: 200px; height: 60px; border: 1px solid rgba(255,0,54,1); background-color: rgba(255,0,54,0.1); border-radius: 4px; color: #ff0036; font-size: 24px; font-weight: 400; }
.flex__container > span { display: inline-flex; justify-content: center; align-items: center; }
.divider { border-right: 1px dashed currentColor; }
.coupon { min-width: 50px; }
.price { flex: 1; min-width: 0; padding: 0 10px; }

Conclusion

This note covers most of the Flexbox specification, including axis concepts, logical properties, free‑space handling, alignment, sizing, ordering, and practical tips. While some advanced topics such as overflow handling, scrolling, and stacking contexts are omitted due to their rarity, the material provides a solid foundation for building reliable Flexbox‑based layouts.

If you encounter unexpected behavior when using Flexbox—especially with automated UI generation tools—feel free to discuss and share solutions.

Follow "Alibaba F2E" to stay updated on front‑end trends.