给子项多一点自由

align-self

子项自己的对齐方式

用于单独控制某个子元素在交叉轴（cross axis）方向上的对齐方式。当flex-item设置了align-self，他会忽略父容器align-items的设定，采用自己的对齐方式

值	含义	说明
auto	默认值	继承父容器的 align-items 值
flex-start	顶部对齐	子项靠交叉轴起点
flex-end	底部对齐	子项靠交叉轴终点
center	居中对齐	子项在交叉轴方向居中
baseline	基线对齐	文本基线对齐（通常用于文字）
stretch	拉伸对齐	自动拉伸填满容器高度（前提是未设置固定高度）

order

重新定义视觉顺序

order 属性完美体现了内容结构（HTML）与视觉表现（CSS）分离的原则。他允许我们仅通过 CSS 来调整 Flex 子项的视觉排列顺序，而无需改动 HTML 源码

• 所有的子项 order 默认值为 0
• 浏览器根据 order 值的大小排序，数值越小，排列越靠前
• order 值可以是负数

实例

视觉顺序： [确认] [取消] [重置]

DOM顺序：[取消] [重置] [确认]

<template>
  <div class="button-group">
    <button class="btn">取消</button>
    <button class="btn">重置</button>
    <button class="btn primary">确定</button>
  </div>
</template>

<style scoped>
.button-group {
  display: flex;
}
.primary {
  order: -1;
}
</style>

可访问性警告

order非常强大，但是使用必须谨慎，他存在a11y陷阱

order只改变视觉，不改变DOM

1. 对键盘用户的影响

用户使用Tab进行导航时，焦点会按照DOM顺序移动，而不是视觉顺序，这会导致焦点在屏幕上疯狂跳跃，体验极差

2. 对屏幕阅读器用户的影响

屏幕阅读器同样按照DOm顺序朗读内容。视觉与听觉的顺序不匹配，会给视障用户造成严重的信息理解错乱