526互联

Flex 布局常用属性

发布时间 2023-12-12 11:54:41作者: Kllin

Flex布局（弹性布局）是CSS3中引入的一种布局模式，它通过display: flex;设置在容器上，然后利用一系列的属性来控制子元素的排列和对齐方式。以下是常用的Flex布局属性：

  1. display

    • display: flex;：将容器指定为弹性容器。

  2. flex-direction

    • flex-direction: row;：水平主轴，子元素水平排列（默认值）。
    • flex-direction: row-reverse;：水平反向主轴，子元素水平反向排列。
    • flex-direction: column;：垂直主轴，子元素垂直排列。
    • flex-direction: column-reverse;：垂直反向主轴，子元素垂直反向排列。

  3. flex-wrap

    • flex-wrap: nowrap;：默认值，子元素不换行，尽可能在一行显示。
    • flex-wrap: wrap;：子元素自动换行，超出容器宽度会进行换行显示。
    • flex-wrap: wrap-reverse;：子元素反向换行。

  4. justify-content

    • justify-content: flex-start;：默认值，子元素靠容器的起始位置对齐。
    • justify-content: flex-end;：子元素靠容器的结束位置对齐。
    • justify-content: center;：子元素在容器中居中对齐。
    • justify-content: space-between;：子元素平均分布在容器内，两端不留空白。
    • justify-content: space-around;：子元素平均分布在容器内，两端留有相等的空白。

  5. align-items

    • align-items: stretch;：默认值，子元素拉伸以填充容器高度。
    • align-items: flex-start;：子元素靠容器的顶部对齐。
    • align-items: flex-end;：子元素靠容器的底部对齐。
    • align-items: center;：子元素在容器中垂直居中对齐。
    • align-items: baseline;：子元素基线对齐。

  6. align-content

    • align-content: stretch;：默认值，容器内的行拉伸以填充容器高度。
    • align-content: flex-start;：所有行在容器的顶部对齐。
    • align-content: flex-end;：所有行在容器的底部对齐。
    • align-content: center;：所有行在容器中垂直居中对齐。
    • align-content: space-between;：所有行平均分布在容器内，两端不留空白。
    • align-content: space-around;：所有行平均分布在容器内，两端留有相等的空白。

  7. flex

    • flex: flex-grow flex-shrink flex-basis;：设置子元素的缩放比例、收缩能力和基准值。
    • flex-grow：指定子元素的放大比例。
    • flex-shrink：指定子元素的收缩比例。
    • flex-basis：指定子元素的基准值。

这些是Flex布局中常用的属性，通过组合使用它们，可以实现各种不同的弹性布局效果。