目录
- 概述
- 弹性盒子布局流
- 网格布局流
- Grid和Flex布局的使用策略
正文
1.概述
这里主要给大家总结一下推荐使用的两种布局流：弹性盒子布局流和网格布局流
2.弹性盒子布局流
Flexible Box Layout 是为了提供更加灵活高效的布局方式，即便是在宽高未知的情况下，也能排列和分割一个盒子内部的布局，而且在不同布局方向（横向/纵向）的调整更为灵活。
弹性盒子的相关元素：
作用于父元素： 建立一个弹性盒子 display:flex
规定盒子的主轴方向 flex-direction:row/column;
子元素折行显示形式 felx-wrap：wrap;
主轴方向子元素的排列方式 justify-content: center；
交叉轴方向子元素的对齐方式 align-items:flex-start
交叉轴方向多行子元素的布局方式 align-content: flex-start
以明确值设定子元素的问题 gap:
作用在子元素：
规定item未放缩之前的默认大小
flex-basis: auto;
规定有剩余空间时，对item的分配比例
felx-grow: number;
规定空间不够时，对item的压缩的比例
flex-shrink:number;
以上三项的缩写
flex:grow shrink basis;默认 0 1 auto
规定item从左到右显示的顺序
order:number;默认是0
规定单个item在交叉轴上的位置
align-self:auto;
示例；
3.网格布局流
2017年推出的Grid布局可以由行和列组成二维布局，然后将元素放置到网格中，元素可以只占其中一个单元格，也可以占据多行或多列。
- 用于父元素：
display:grid;
用来生成显式的列，行
grid-template-colums/rows：数值/百分比等
规定区域的分布
grid-tempate-area:"header header"
"sidebar content"
"footer footer"
规定默认的排序方向
grid-auto-flow:row;
- 用于子元素：
规定占用的列，行
grid-colum/row:<start-line>/<end-line>;
是grid-colum/row-start和grid-colum/row-end的 缩写形式
规定占用的area
grid-area:header;
示例：
4.Grid和Flex布局的使用策略
- Flex布局：1.一维布局；2.基于内容 ；3.浏览器兼容性更好
- Grid布局：1.二维布局 ；2.基于布局 ；3.17年后的浏览器的版本普遍支持
总结：
- 面积或者整体布局，推荐使用Grid布局
- 小面积或者组件，或Grid item中可以使用Flex做灵活布局
