Flex: 左200px，右自适应
left
right
Flex: 左200px，右自适应,但最小200px
left
right
Flex: 左200px，右自适应,但最小200px
left
right
Flex: 左200px，右自适应,但最小200px
left
right
Flex: 左200px，右自适应,但最小200px,最大500px
left
right
Flex: 水平排列
1
2
3
Flex: 垂直排列
1
2
3
Flex: 不换行
1
2
3
Flex: 换行
1
2
3
Flex: 主轴居中（水平居中）
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 主轴两端对齐（水平两端对齐）space-between
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 主轴两端对齐（水平两端对齐）space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 主轴两端对齐（默认水平两端对齐）space-evenly 间距一样大
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 交叉轴（垂直底部）flex-end
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 交叉轴（垂直居中）center
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 交叉轴底部（默认垂直拉伸、占满）stretch .如果项目未设置高度或设为auto，将占满整个容器的高度。
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 多根轴线的对齐方式 align-content（center 居中） .如果项目只有一根轴线，该属性不起作用。
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 多根轴线的对齐方式 align-content（stretch 拉伸） .如果项目只有一根轴线，该属性不起作用。
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 多根轴线的对齐方式 align-content（space-between 两端对齐） .如果项目只有一根轴线，该属性不起作用。
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 内容等分
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
Flex: 左右布局，左侧定宽，右侧撑满
1
1
2
1
2
1
2
Flex: 未知高宽上下左右居中
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
