这是我参加「第五届青训营」伴学笔记创作活动的第7天
块级排版上下文
- Block Formatting Context(BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Gird子项
- overflow值不是visible的块盒
- display:flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会和外面的合并
- BFc不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的：
摆放的流向
摆放顺序
盒子的宽度和高度
水平和垂直方向的对齐
是否允许执行
主轴和侧轴
主轴：元素摆放的方向
侧轴：与主轴垂直的方向
justify-content
- flex-start:靠左插空格
- flex-end:靠右插空格
- center:在中间插空格
- space-between:两边对齐插空格
- space-around:两边留空间插空格
- space-evenly:间距相等留空格
align-items
- flex-start:在上面对齐
- flex-end：在下面对齐
- center：中间对齐
- stretch：铺满（默认）
- baseline：基线对齐（所有子元素的基线对齐）
Flexibility
- 可以设置子项的弹性：当空间有剩余空间时，会伸展，容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
flex-grow
给A的力给了2的伸展力，给B给了1的伸展力（把容器的空间减去300之后分给A和B以2:1的比例,不是直接2:1）
flex-shrink
容器空间不够的时候，通过flex-shrink指定哪个元素能被压缩，然后进行处理
类比于其它属性，flex也可以在css中进行缩写，如下图所示
Gird布局
引入原因:不止进行一维的排列，要进行二维的处理和排列
display:grid
- display:gird使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网络
- 设置每一个子项占据那些行/列
