CSS
ZH

CSS Flexbox Layout Guide

Master CSS flexbox for modern layouts. Understand flex-direction, justify-content, align-items, and more.

Flexbox Basics

Flexbox is a one-dimensional layout model for arranging items in rows or columns:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

Container Properties

flex-direction
rowrow-reversecolumncolumn-reverse
justify-content
flex-startflex-endcenterspace-betweenspace-aroundspace-evenly
align-items
flex-startflex-endcenterstretchbaseline
flex-wrap
nowrapwrapwrap-reverse

Item Properties

flex-growGrow factor
flex-shrinkShrink factor
flex-basisInitial size
align-selfIndividual align
orderOrder
flexShorthand

Common Layout Examples

Horizontal Center

.container {
  display: flex;
  justify-content: center;
}

Perfect Center

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Equal Distribution

.item {
  flex: 1; /* 每个项目等分空间 */
}

Related Tool

Flexbox Generator

Visual Flexbox layout