✍️述 - Layout
前端开发中，开发初期阶段需要在了解需求后，能够设计好合理的布局。
- 大的方面 - 整体页面的框架，布局设计
- 小的方面 - 细节内容的展示
所以，能够灵活的针对不同的浏览器兼容性，写出好的布局「布局的不同实现方法」是很重要的，同时在面试中也会考察「今日头条」
📖大的方面
Grid布局给人最直观的感觉就是很规矩，方方正正。
Grid的核心属性 - 「以下并未列出全部属性，仅列出功能，因为属性写法有好多种」
/**
* 容器属性 - rows * columns 即所有的格子
*/
display: grid; /* 生命当前容器布局: grid */
grid-template-rows: ; /* grid的行数 */
grid-template-columns: ; /* grid的列数 */
/**
* 容器内部项目属性
*/
// 你可以在️⬆上图布局中找出这个项目
grid-column: 1 / span 2; /* 起始列线1，停止于列线3，span指的是从列线1向后跨2列线 */
grid-row: 1 / span 2; /* 起始行线1，停止于行线3，span指的是从行线1向下跨2行线 */
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
Grid布局中，列线「row line」和行线「column line」围住的就是所有的格子。
列线 - 行线
如上所示我说出的, 如3*3 Grid 布局会有行线4，列线4。
这样，通过控制当前项目的行线始终，列线始终，就可以放置当前元素在任何位置「可以超出当前Grid」
// 你可以在️⬆上图布局中找出这个项目
grid-row: 6 / span 2;
grid-column: 1 / span 3;
1
2
3
2
3
Flex布局给人最直观的感受就是可伸缩，灵活。
Flex的核心属性 - 「并未列出所有属性，同种属性有多种写法」
/**
* 容器属性
*/
display: flex;
justify-content: start | end | center | space-round | space-between | space-evenly
align-items:
1
2
3
4
5
6
2
3
4
5
6
loading......
📖小的方面
- Position 布局
loading......
Note - 代码托管FED-2019