Flex CSS布局练习

第一题

  • 布局介绍

Flex CSS布局练习_第1张图片

这个是经典的首页布局,垂直方向分为头,内容,尾组成,内容又分为导航和展示,其中展示内容需要自适应,需要随着窗口的大小发生变化

  • 分析

垂直方向可以使用flex方向为column,因为中间内容项需要自适应,可以使用flex-grow指定增长自适应,内容里面又包含了导航和内容展示,其中内容展示是自适应,因此布局代码参考如下:

加上样式后







Flex CSS布局练习_第2张图片

有了上中下三层,并且中间层依靠flex-grow: 1能够随着高度增长增长,上和下保持高度不变,添加nav和content样式







Flex CSS布局练习_第3张图片

中间层右边content会随着高度增加而增加

第二题

  • 布局

Flex CSS布局练习_第4张图片

  • 实现






Flex CSS布局练习_第5张图片

所有元素都是响应式的

你可能感兴趣的:(flex,flexbox)