flex布局属性详解

Flex布局中主要包含了以下五个概念：

1. 弹性容器（flex container）：采用Flex布局的外层容器。

2. 弹性项（flex item）：容器中的子元素。

3. 主轴（main axis）： 弹性容器的水平或垂直方向。

4. 交叉轴（cross axis）：与主轴垂直的方向。

5. 对齐方式（align）：设置弹性项在弹性容器内的对齐方式。

弹性容器常见属性

1. flex-direction：用于设置主轴的方向。它有四个取值：

- row：默认值，主轴为水平方向

- column：主轴为垂直方向

- row-reverse：主轴为水平方向，但是从右向左排列

- column-reverse：主轴为垂直方向，但是从下往上排列

2. flex-wrap：用于定义弹性容器里的弹性项是否应该换行。它有三个取值：

- nowrap：默认值，弹性项不换行

- wrap：弹性项自动换行，如果需要的话

- wrap-reverse：弹性项自动换行，但是倒序排列

3. justify-content：定义在主轴上弹性项的对齐方式。它有五个取值：

- flex-start：默认值，弹性项在主轴上从左至右排列

- flex-end：弹性项在主轴上从右至左排列

- center：弹性项在主轴上居中排列

- space-between：弹性项在主轴上平均分布排列，左右两端没有空隙

- space-around：弹性项在主轴上平均分布排列，各自之间有空隙

4. align-items：定义在交叉轴上弹性项的对齐方式。它有五个取值：

- flex-start：弹性项在交叉轴上从上至下排列

- flex-end：弹性项在交叉轴上从下至上排列

- center：弹性项在交叉轴上居中排列

- baseline：每个弹性项都根据其文本基线进行对齐

- stretch：默认值，弹性项在交叉轴上被拉伸填满弹性容器

5. align-content：定义弹性容器内的多行弹性项在交叉轴上的对齐方式。它有六个取值：

- flex-start：弹性项在交叉轴上从上至下排列

- flex-end：弹性项在交叉轴上从下至上排列

- center：弹性项在交叉轴上居中排列

- space-between：弹性项在交叉轴上平均分布排列，每行之间没有空隙

- space-around：弹性项在交叉轴上平均分布排列，每行之间有空隙

- stretch：默认值，弹性项在交叉轴上被拉伸填满弹性容器

6. flex-flow：

flex-flow：是flex-direction和flex-wrap的缩写属性，用于指定弹性容器的主轴方向和换行方式。默认值为“row nowrap”。

7. gap：

gap：用于设置弹性容器和弹性项之间的间隔。它可以接收一个长度值或百分比。

.container {
        gap: 20px;
      }

弹性项的基本属性

1. flex-grow：定义弹性项的放大比例。默认值为0，即不进行放大。

.item {
        flex-grow: 2;
      }

设置该弹性项在放大时会占据更多空间。

2. flex-shrink：设置弹性项的缩小比例。默认值为1，即缩小比例和弹性容器内其他元素相同。

.item {
        flex-shrink: 2;
      }

设置该弹性项在缩小时会占据更少的空间。

3. flex-basis：设置弹性项在弹性容器内的基准宽度。默认值为auto，即弹性项的宽度由其内容决定。

.item {
        flex-basis: 50%;
      }

设置该弹性项在弹性容器内占50%的空间。

4. flex：是flex-grow、flex-shrink和flex-basis这三个属性的缩写，它们按照顺序分别对应以上三个属性。默认值为“0 1 auto”。

.item {
        flex: 1 2 100px;
      }

上述代码中，设置该弹性项的放大比例为1，缩小比例为2，基准宽度为100px。

5. align-self 控制子项自己在侧轴上的排列方式,

他可以覆盖父项设置的 align-items 属性 呈现自己的方式 默认值 auto 表示继承父项设置 如果没有父项等同于 stretch

该属性可能取6个值，除了 auto，其他都与 align-items 属性完全一致。

6. order 属性定义项目的排列顺序 数值越小 排列越靠前 默认值 0 ，和 z-index 相反