Skip to content

Flex 布局详细总结

Flex 布局(Flexible Box Layout)是一种用于在容器中分配空间和对齐内容的 CSS 布局模型。它使得在复杂的布局中,元素能够灵活地适应可用空间。

主要概念

  1. 容器与项目

    • 容器:通过 display: flex;display: inline-flex; 声明的元素。
    • 项目:容器内部的直接子元素。
  2. 主轴与交叉轴

    • 主轴:默认方向为水平方向(flex-direction: row;)。
    • 交叉轴:垂直于主轴的方向。

容器属性

  • display: 设置为 flexinline-flex
  • flex-direction: 定义主轴方向(row, row-reverse, column, column-reverse)。
  • flex-wrap: 定义是否换行(nowrap, wrap, wrap-reverse)。
  • flex-flow: flex-directionflex-wrap 的简写形式。
  • justify-content: 定义主轴上的对齐方式(flex-start, flex-end, center, space-between, space-around, space-evenly)。
  • align-items: 定义交叉轴上的对齐方式(flex-start, flex-end, center, baseline, stretch)。
  • align-content: 定义多行的对齐方式(flex-start, flex-end, center, space-between, space-around, stretch)。
  • gap: 定义项目之间的间距。

项目属性

  • flex-grow: 定义项目的放大比例,默认为 0。

  • flex-shrink: 定义项目的缩小比例,默认为 1。

  • flex-basis: 定义项目在主轴上的初始大小,默认值为 auto

  • flex: flex-grow, flex-shrinkflex-basis 的简写形式。

    flex 语法规则

    单值语法:值必须是以下之一:

    • 一个 <flex-grow> 的有效值:此时简写会扩展为 flex: <flex-grow> 1 0
    • 一个 <flex-basis> 的有效值:此时简写会扩展为 flex: 1 1 <flex-basis>
    • 关键字 none 或者全局关键字之一。

    双值语法

    • 第一个值必须是一个 flex-grow 的有效值。

    • 第二个值必须是以下之一:

    1. 一个 flex-shrink 的有效值:此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0
    2. 一个 flex-basis 的有效值:此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>

    三值语法:值必须按照以下顺序指定:

    • 一个 flex-grow 的有效值。
    • 一个 flex-shrink 的有效值。
    • 一个 flex-basis 的有效值。
  • align-self: 定义单个项目在交叉轴上的对齐方式,覆盖 align-items 的设置(auto, flex-start, flex-end, center, baseline, stretch)。

使用示例

css
.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.item {
    flex: 1 1 200px; /* flex-grow | flex-shrink | flex-basis */
    padding: 10px;
}

MDN