Flexbox align-items属性

CSS3 flexbox align-items属性用于在柔性容器的各项未使用横轴上的所有可用空间时设置其垂直对齐。

其可能的值为：

Stretch：这是默认值。它指定将项目拉伸以适合容器。

flex-start：将项目设置在容器顶部。

flex-end：将项目设置在容器的底部。

center：将项目设置在容器的中心(垂直)。

baseline：它将项目设置在容器的基线。

让我们以一些示例来演示上述值的用法。

请参阅以下示例：

示例1 ：(使用拉伸值)

这是默认值。

  
flex item 1
  
flex item 2
  
flex item 3

示例2 ：(使用flex-start值)

  
flex item 1
  
flex item 2
  
flex item 3

示例3 ：(使用flex-end值)

  
flex item 1
  
flex item 2
  
flex item 3

示例4 ：(使用中心值)

  
flex item 1
  
flex item 2
  
flex item 3

示例5 ：(使用基线值)

  
flex item 1
  
flex item 2
  
flex item 3