【css】常用样式align-items

取值

normal

这个关键字的效果取决于我们处在什么布局模式中：

- 在绝对定位的布局中，对于被替代的绝对定位盒子，这个效果和`start?`的效果的一样；对于其他所有绝对定位的盒子，这个效果和`stretch`的效果一样。
- 在绝对定位布局的静态位置上，效果和`stretch`一样。
- 对于那些弹性项目而言，效果和`stretch`一样。
- 对于那些网格项目而言，效果和`stretch`一样，除了有部分比例或者一个固定大小的盒子的效果像`start`。
- 这个属性不适用于块级盒子和表格。

flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

start

The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.

end

The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

left

The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like `start`.

right

The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like `start`.

self-start

The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.

self-end

The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.

baseline、first baseline、last baseline

所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

stretch

弹性项包含外边距的交叉轴尺寸被拉升至行高

safe

Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were `start`.

unsafe

Used alongside an alignment keyword. Regardless of the relative sizes of the item and alignment container and whether overflow which causes data loss might happen, the given alignment value is honored.

语法格式

align-items = 
  normal                                    |
  stretch                                   |
                         |
  [ ?  ]  

 = 
  [ first | last ]?  &&
  baseline           

 = 
  unsafe  |
  safe    

 = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end