flex布局

知识储备

  • 阮一峰flex布局
  • 菜鸟教程 flex 语法
  • 菜鸟教程 flex属性

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

请自己动手实现以下布局

一、水平布局

示例图


flex布局_第1张图片
layout_01.jpg

描述

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

二、水平居中等间距布局

flex布局_第2张图片
layout_02.jpg

描述

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

三、每个元素等间距布局

flex布局_第3张图片
layout_03.jpg

描述

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

四、两边布局

flex布局_第4张图片
layout_04.jpg
  • 无论大盒子宽度高度为多少,2个小盒子均能垂直居中水平靠边

你可能感兴趣的:(flex布局)