目录
关于Flex的总结
<<<一个flex布局的游戏 https://flexboxfroggy.com/
基本概念
flex配置项作用于flex容器和flex子项两项
flex容器的坐标系中，x轴为main axis，-y轴为cross axis
flex布局是一种弹性的布局方式
弹性体现的点在于
- flex子项目能够根据整体尺寸来调整自身的尺寸，flex子项中position, width, height, float, clear, vertical-align变得不那么重要
- flex子项类似于内联文字, text-align, letter-spacing, line-height之类的属性
作用于flex容器的属性
作用于flex容器的属性一般适用比较多，会对子项的排列方式，空余空间分配1. flex-direction
子项的排序方向
- row 默认值，从左往右
- row-reverse
- column 从上往下
- column-reverse
2. flex-wrap
wrap是换行的意思，即控制换行的方式
- nowrap 强制不允许换行，比较复杂
- wrap 往下换行
- wrap-reverse 往上换行
3. flex-flow
1, 2的结合配置
4. justify-content
水平方向的对齐方式
- flex-start 默认值，左对齐
- flex-end 右对齐
- center 居中
- space-between 两端对齐，中间空格均分
- space-around 常用
- space-evenly 常用
5. align-items
竖直方向的对齐方式
- stretch 拉伸铺满竖直
- flex-start 上对齐
- flex-end 下对齐
- center 中对齐
- baseline 基线对齐（取最长的子项作为基线）
6. align-content
把多行当成子项，进行类似justify-content的对齐排列
- stretch 竖直拉伸
- flex-start
- flex-end
- center
- space-between
- space-around
- space-evenly
作用flex子项的属性
1. order
子项的排列顺序改变
2. felx-grow
如何分配水平剩余空间
-
[0, 1]
单个元素直接取剩余空间比例
多个元素进行缩放比例分配
3. flex-shrink
容器空间不足的时候，单个元素的收缩比例
与2一模一样
4. flex-basis
预分配宽度
-
|auto
当预分配宽度大于整体的宽度后，会将子项进行等比例缩放
5. flex
是2，3，4的缩写
6. align-self
align-items的单个实例