这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天。
上一篇笔记中提到的块级、行级只能实现一些简单的布局，因此css中还提出了更新的排版方式。
依旧是容器和子元素的概念
Flex Box
Flex Box 是一种新的排版上下文
使用方法：给对应元素添加css声明display:flex
控制范围（控制子级盒子）：
- 摆放的流向（）
- 摆放顺序
- 盒子宽度（默认由元素中的内容宽度决定）和高度
- 水平和垂直方向的对齐
- 是否允许折行
flex排版方式下子级元素可以有下列四种排列方式：
上方提到的对齐方式在Flex Box中是由主轴和侧轴来区分的
主轴：元素的流向
侧轴：与主轴垂直的方向
主轴上的对齐
使用到的是justify-content属性，对应的属性值和展示的效果如下图：
侧轴上的对齐
使用到的是align-items属性(不设置的时候默认是stretch)，对应的属性值和展示的效果如下图：
其他属性
- 让所有元素之一有不同于其他元素的对齐方式，用到的是
align-self属性。
- 设置流向顺序的属性：
order。
宽度高度的计算
flexibility属性
flex-grow属性示例如下图其中元素的属性值数字并不代表实际子级元素所占用的空间位置大小
flex-shrink属性示例如下图例子中对
a元素设置了flex-shrink:0,代表a元素在容器空间不足时的收缩能力为0，即a元素所占的空间位置不进行压缩。
以上属性的简写方法：
Grid
使用方法：
- 使用
diaplay:grid生成一个块级的Gird容器 - 用
gird-template划分网格grid-template-columns指定在列方向上划分的宽度，指定几个属性值分为几列grid-template-rows指定行方向
指定分区
使用grid-area属性，属性值分别书写对应分区边框所在网格线数，各数字之间用斜杠分隔开即可。
实现文字环绕图片
用到的属性是float,效果如下：
原始界面如下
浏览器放大后的效果，实现了文字环绕图片（
float属性的特性）
定位（position）
absolute会相对于从该元素向上找，最近的有relative属性值的元素进行相对定位。
absolute和fixed都是脱离文档流的定位
