CSS Flexbox 布局指南

掌握现代布局的 CSS Flexbox。理解 flex-direction、justify-content、align-items 等。

Flexbox 基础

Flexbox 是一种一维布局模型，适合在行或列中排列元素：

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

flex-direction

rowrow-reversecolumncolumn-reverse

justify-content

flex-startflex-endcenterspace-betweenspace-aroundspace-evenly

align-items

flex-startflex-endcenterstretchbaseline

flex-wrap

nowrapwrapwrap-reverse

flex-grow放大比例

flex-shrink缩小比例

flex-basis初始大小

align-self单独对齐

order排列顺序

flex简写属性

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

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

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