flex侧轴对齐方式

flex侧轴对齐方式
Flex侧轴对齐方式是指在Flex布局中，控制子元素在侧轴方向上的对齐方式。

侧轴方向是指与主轴垂直的方向，也就是Flex容器的高度方向。

在Flex布局中，主轴方向和侧轴方向分别由flex-direction 属性和justify-content属性控制。

而侧轴对齐方式则由align-items属性和align-self属性控制。

align-items属性用于控制Flex容器内所有子元素在侧轴方向上的对齐方式，而align-self属性则用于控制单个子元素在侧轴方向上的对齐方式。

align-items属性有以下几个取值：
- flex-start：子元素在侧轴方向上对齐容器的起始边缘。

- flex-end：子元素在侧轴方向上对齐容器的结束边缘。

- center：子元素在侧轴方向上居中对齐。

- baseline：子元素在侧轴方向上以基线对齐。

- stretch：子元素在侧轴方向上拉伸以填满容器。

默认情况下，align-items属性取值为stretch，即子元素在侧轴方向上被拉伸以填满容器。

align-self属性则可以用于控制单个子元素在侧轴方向上的对齐方式。

它的取值与align-items属性相同，但只应用于单个子元素。

例如，我们可以将一个子元素的align-self属性设置为flex-
end，使其在侧轴方向上对齐容器的结束边缘，而其他子元素仍然保持默认的stretch对齐方式。

除了以上几种对齐方式，align-items属性还可以取值为safe 和unsafe。

这两个值用于控制子元素在侧轴方向上的安全区域，即避免子元素被裁剪或超出容器的边界。

默认情况下，align-items 属性取值为safe。

在实际应用中，我们可以根据具体的布局要求选择不同的侧轴对齐方式。

例如，当我们需要将多个子元素在侧轴方向上居中对齐时，可以使用align-items属性的center取值；当我们需要让一个子元素在侧轴方向上对齐容器的底部时，可以使用align-self属性的flex-end取值。

总之，Flex侧轴对齐方式是控制Flex布局中子元素在侧轴方向上对齐的重要属性，它可以帮助我们实现各种不同的布局效果。

在实际开发中，我们需要灵活运用这些属性，以满足不同的设计需求。