flex侧轴对齐:flex布局侧轴对齐方式

  Flexbox布局中的侧轴对齐指的是flex容器中flex项目在侧轴方向上的对齐方式,即垂直方向上的对齐方式。
 
  在Flexbox布局中,侧轴默认的对齐方式是stretch,即让所有flex项目的高度或宽度相等,以填满容器的高度或宽度。
 
  除了stretch外,Flexbox布局还提供了以下几种侧轴对齐方式:
 
  flex-start:将所有flex项目顶部或左侧对齐(根据侧轴方向而定);
 
  flex-end:将所有flex项目底部或右侧对齐(根据侧轴方向而定);
 
  center:将所有flex项目居中对齐(根据侧轴方向而定);
 
  baseline:将所有flex项目的基线对齐(仅对flex项目的文字或图片等有基线的元素有效)。
 
  这些对齐方式可以通过在flex容器上设置align-items属性来实现。例如,要将flex项目在垂直方向上居中对齐,可以将align-items属性设置为center,如下所示:
 
  .container{
 
  display:flex;
 
  align-items:center;
 
  }
 
  除了align-items属性之外,Flexbox布局还提供了align-self属性,用于控制单个flex项目在侧轴方向上的对齐方式。该属性可以覆盖align-items属性设置的对齐方式。
 
  align-self属性可以取和align-items相同的值,具体使用方法如下:
 
  .item{
 
  align-self:flex-start|flex-end|center|baseline|stretch;
 
  }
 
  除了以上五种常见的侧轴对齐方式,Flexbox还提供了一个safe关键字用于防止内容溢出容器,一个unsafe关键字用于允许内容溢出容器。
 
  总的来说,Flexbox布局的侧轴对齐方式非常灵活,可以通过不同的属性和值组合实现各种对齐方式,这对于响应式设计和布局非常有帮助。