flex布局

知识储备

这两篇文章上面的flex知识点足以应对工作中所有场景,如有哪个属性细节不清楚的,可以在菜鸟教程上搜索关键词

请自己动手实现以下布局

一、水平布局

示例图


layout_01.jpg

描述

  • 大盒子宽度600,高度200 边框1px
  • 中间3个黑盒子每个间距100px(可手动控制)在大盒子内部居中
  • 无论大盒子宽度高度为多少,小盒子均能水平垂直居中

二、水平居中等间距布局

layout_02.jpg

描述

  • 无论大盒子宽度高度为多少,小盒子均能水平垂直居中
  • 间距自动根据大盒子剩余宽度自适应
  • 小盒子间距相同
  • 左右间距为两个小盒子间距的一半

三、每个元素等间距布局

layout_03.jpg

描述

  • 无论大盒子宽度高度为多少,小盒子均能水平垂直居中
  • 间距自动根据大盒子剩余宽度自适应
  • 小盒子间距相同
  • 左右间距等于两个小盒子间距

四、两边布局

layout_04.jpg
  • 无论大盒子宽度高度为多少,2个小盒子均能垂直居中水平靠边
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容