知识储备
这两篇文章上面的flex知识点足以应对工作中所有场景,如有哪个属性细节不清楚的,可以在菜鸟教程上搜索关键词
请自己动手实现以下布局
一、水平布局
示例图
layout_01.jpg
描述
- 大盒子宽度600,高度200 边框1px
- 中间3个黑盒子每个间距100px(可手动控制)在大盒子内部居中
- 无论大盒子宽度高度为多少,小盒子均能水平垂直居中
二、水平居中等间距布局
layout_02.jpg
描述
- 无论大盒子宽度高度为多少,小盒子均能水平垂直居中
- 间距自动根据大盒子剩余宽度自适应
- 小盒子间距相同
- 左右间距为两个小盒子间距的一半
三、每个元素等间距布局
layout_03.jpg
描述
- 无论大盒子宽度高度为多少,小盒子均能水平垂直居中
- 间距自动根据大盒子剩余宽度自适应
- 小盒子间距相同
- 左右间距等于两个小盒子间距
四、两边布局
layout_04.jpg
- 无论大盒子宽度高度为多少,2个小盒子均能垂直居中水平靠边