Flex容器属性:

tips: 布局时，最后元素靠左，或者 justify-content:space-around,最后一行的分布问题

.box2 {
  display: flex;

  flex-direction: row;
  // height: 500px;
  border: 1px green solid;
  flex-wrap: wrap;
  .itemClass2 {
    border: 1px red solid;
    width: 60px;
    height: 60px;
    box-sizing: border-box;
    --n: 5; /* 一行几个 变量*/ 
    --space: calc(100% - var(--n) * 60px); /*变量 一行减去item的宽度后剩下的间距 */
    --leftRight: calc(var(--space) / var(--n) / 2); /*变量 每个item左右的间距 */
    margin: 10px var(--leftRight);//使用变量
  }
  // .itemClass2:last-child {
  //   margin-left: auto;
  // }
}

1、flex-direction

row：这是默认值。当设置为row时，主轴的方向为水平，子元素从左到右排列。
row-reverse：当设置为row-reverse时，主轴的方向仍然是水平，但子元素从右到左排列，即反向水平排列。
column：当设置为column时，主轴的方向变为垂直，子元素从上到下排列。
column-reverse：当设置为column-reverse时，主轴的方向为垂直，但子元素从下到上排列，即反向垂直排列。

2、flex-wrap

nowrap（默认值）：子元素不会换行，即使容器的空间不足以容纳它们。这可能会导致子元素溢出容器。
wrap：如果容器的空间不足以容纳所有子元素，那么子元素会移到下一行。这意味着子元素会在需要时换行。
wrap-reverse：这也是一个换行选项，但子元素的排列顺序与 wrap 相反。在 wrap-reverse 中，子元素会从容器的底部开始向上换行。

3、flex-flow

flex-flow 是一个简写属性，用于同时设置 flex-direction 和 flex-wrap 属性。
例如：
如果你希望子元素在水平方向上排列，并且当空间不足时换行，你可以使用 flex-flow: row wrap;。
flex-flow: row nowrap; 表示子元素在水平方向上排列，并且不会换行。
flex-flow: column wrap-reverse; 表示子元素在垂直方向上排列，并且会反向换行。

4、justify-content ：是 CSS 中用于控制弹性盒子（flex container）中的子元素（flex items）在主轴（main axis）上的对齐方式的属性。

flex-start（默认值）：子元素在容器的起始位置对齐。
flex-end：子元素在容器的结束位置对齐。
center：子元素在容器的中心对齐。
space-between：子元素在容器中均匀分布，第一个子元素在容器的起始位置，最后一个子元素在容器的结束位置，其余子元素在它们之间均匀分布。
space-around：子元素在容器中均匀分布，每个子元素周围都有相等的空间，这意味着子元素之间的空间是子元素与容器边缘之间的空间的两倍。

5、align-items ：是 CSS Flexbox 布局中的一个属性，它定义了沿着交叉轴（cross axis）如何对齐 flex 容器的子元素（flex items）。

交叉轴是与主轴（main axis）垂直的轴，主轴的方向由 flex-direction 属性决定。align-items 的值决定了子元素在交叉轴上的对齐方式。

flex-start：子元素沿着交叉轴的起点对齐。
flex-end：子元素沿着交叉轴的终点对齐。
center：子元素在交叉轴上居中对齐。
baseline：子元素按照它们的基线对齐。基线通常是文本内容的底部线，对于没有文本内容的元素，基线行为可能因元素类型而异。
stretch（默认值）：如果子元素未设置高度或设为 auto，则它们会沿着交叉轴方向拉伸以填满整个容器的高度。这意味着子元素会被拉伸或压缩以适应容器的高度，
除非它们有自己的明确尺寸。

6、align-content : (相当于主轴上面的 justify-content) 是 CSS Flexbox 布局中的一个属性，它用于定义在交叉轴（cross axis）上如何对齐 flex 容器的行（如果 flex 容器是多行的）。

这个属性只对设置了 display: flex; 并且具有多行子项的容器有效。当容器只有一行子项时，align-content 属性不会产生任何效果。

stretch（默认值）：如果有多行子元素，它们会沿着交叉轴方向拉伸以填满整个容器的高度。
flex-start：多行子元素在容器的起始位置对齐。
flex-end：多行子元素在容器的结束位置对齐。
center：多行子元素在容器的中心对齐。
space-between：多行子元素在容器中均匀分布，第一行在容器的起始位置，最后一行在容器的结束位置，其余行在它们之间均匀分布。

Flex项目属性

1、order

order 属性用于指定 flex 项目在 flex 容器中的排列顺序。默认情况下，所有 flex 项目的 order 值都是 0。order 值越小，项目在容器中的位置越靠前。
默认情况下，Flex子项按照它们在HTML中出现的顺序排列，但是通过为子项设置不同的order值，你可以改变它们的排列顺序。
较小的order值将排在前面，而较大的order值将排在后面。

2、flex-grow

flex-grow属性定义项目的放大比例，默认为0，如果存在剩余空间，也不放大

3、flex-shrink

flex-shrink属性定义项目缩小比例，默认为1，如果空间不足，项目会缩小，负值无效

4、flex-basis

flex-basis是CSS Flexbox布局中的一个属性，它定义了Flex容器中的子项（flex items）在主轴方向上的初始大小。
这个属性决定了子项内容盒（content-box）的宽度或高度，具体取决于主轴的方向。

5、flex

用于设置一个元素的flex-grow, flex-shrink, 和 flex-basis。这三个属性共同决定了元素如何在flex容器中增长、缩小和设置基础大小。

6、align-self ：align-self属性是一个特别有用的属性，它允许你单独覆盖一个flex子项目的对齐方式，而不是依赖于父容器设置的align-items属性。

            align-self优先级高于align-items，并且只在设置了该属性的flex子项目上生效。
auto: 默认值，等同于父元素的align-items值。如果父元素没有设置align-items，则等同于stretch。
flex-start: 子项目与容器的交叉轴起点对齐。
flex-end: 子项目与容器的交叉轴终点对齐。
center: 子项目在容器的交叉轴上居中对齐。
baseline: 子项目按照它们的基线对齐。
stretch:（默认值，如果align-items或align-self设置为auto）子项目将沿交叉轴方向拉伸以填满整个容器。

flex 的理解

flex: <flex-grow> <flex-shrink> <flex-basis> 是这三个属性的简写

flex：1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写；

1：父元素只有400px的时候，4个子元素根据basis每个100px  
2：当父元素小于400px的时候，子元素基于basis上根据shrink收缩  
3：当父元素大于400px的时候，超出的宽度，子元素基于basis上根据grow扩展

flex布局