Skip to main content

Flexbox

要理解 Flexbox，关键是理解主轴和横轴的概念。

主轴由 flex-direction 属性设置。如果该属性为 row，则主轴沿行方向分布，如果该属性为 column，则主轴沿列方向分布。

相对于主轴，横轴沿另一个方向分布，因此，如果 flex-direction 为 row，则横轴沿列方向分布，如果 flex-direction 为 column，则横轴沿行方向分布。

container ~ items​

  • container：容器
  • items：子项

flex-container

flex-items

要使用 Flexbox，需要将 display 属性的值更改为 flex。

.container {
  display: flex;
}

这个初始值意味着

  • 子项显示为一行
  • 子项不换行
  • 子项不会增长到填满容器
  • 子项在容器开始处对齐

flex-direction（container）​

决定主轴的方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction

flex-wrap（container）​

定义当主轴排不下时，是否换行。

flex-wrap

  • nowrap：默认值，不换行
  • wrap：换行
  • wrap-reverse：反向换行

flex-flow（container）​

flex-direction 和 flex-wrap 的简写属性。

.container {
  /* 默认值 */
  flex-flow: row nowrap;
}

justify-content（container）​

定义了所有子项在主轴上的对齐方式。

.container {
  flex-direction: flex-start | flex-end | center | space-between | space-around;
}

justify-content

align-items（container）​

定义了所有子项在横轴上的对齐方式。

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items

align-content（container）​

定义了多根轴的对齐方式。

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

align-content

gap, row-gap, column-gap（container）​

定义了所有子项之间的间距。

gap

order（items）​

定义子项的排列顺序，数值越小，排列越靠前，默认值0。

flex-grow（items）​

定义子项的放大比例，默认值0（不放大）。

flex-shrink（items）​

定义子项的缩小比例，默认值1（空间不足，会缩小）。

flex-basis（items）​

定义了子项在分配多余空间之前，子项占据的主轴空间。

flex（items）​

flex-grow、flex-shrink 和 flex-basis 的简写属性。

.items {
  /* 默认值 */
  flex: 0 1 auto;
}

align-self（items）​

允许单个子项有与其他子项不一样的对齐方式，默认值 auto，表示继承父元素的 align-items 属性。