flex布局占满_果冻公开课第九课：打破传统布局方式的flex（上）

传统的布局方式都基于盒模型

像搭积木一样做出布局

这些布局方式的缺点都很明显

于是"flex布局"就诞生了

彻底改变了布局的方式

动画视频：

果冻公开课第九课：flexhttps://www.zhihu.com/video/1104825597376946176

文字解析：

传统的布局都基于盒模型

需要灵活运用display+postion+float属性

像搭积木一样的方式做出布局

为了完成一些特殊的需求

需要掌握各种奇技淫巧

像垂直居中弹性布局等

对于新手来说都是艰难的考验

比如我们有以下几种常见的布局场景

第一种 水平方向的多列自适应布局

它要求两列布局

一侧列宽固定

另一侧列宽自适应填充整个容器

如果是左侧定宽就浮动到左侧

右边元素margin-left与左侧隔离

缺点是右侧元素必须知道左侧元素的宽度精确设置

而这些数值涉及的元素越多

要修改样式时越容易产生错误

第二种 垂直方向的多行自适应布局

一般来说我们的footer是跟着内容走的

所以当内容较少不足一屏的时候

footer也会跟着内容往上走

导致下面一段空白

如果希望头尾高度固定

中间内容自适应填充整个容器

传统做法里比较简单的方案是用table来实现

table在垂直方向可以占满100%的特性

用一个容器section充当table

里面的三个子元素则设置为表格的行:table-row

这样只设置头尾的高度

剩下的元素也能实现垂直方向自适应占满剩余高度

缺点是这样使用表格行

可能会被同时使用的其他css属性破坏

比如float absolute等等

对margin值也无法正常反应

第三种 水平居中

传统的水平居中解决方案有多种

比如inline-block position table

这里我们先看看inline-block的方式

利用文字居中的属性来让content居中

缺点是可能会限制content的发挥

除非这里本身就需要content是个行内块级元素

第四种 垂直居中

传统的垂直居中解决方案也有多种

比如inline-block position table

水平居中里我们已经看过了inline-block的方式

现在来看看position的方式

让元素在纵向平移父元素高度的一半

再反方向位移自身高度的一半

刚好实现垂直居中

水平居中也可以这样实现

不过这种方式的缺点是可能和其他transform属性冲突

从前面讲的例子可以看出来

这些布局的缺点都非常明显

如果CSS能支持一种新的布局方式就好了

因此大佬们考虑重新设计出一种新的布局方式来解决这些问题

它需要

1 能够自适应，弹性伸缩占满容器，对移动端更加友好

2 容器里的子元素对齐更加灵活和容易

3 容器里的子元素可以横向纵向正向反向排列组合

对应这几个需求

就有了设计这套布局的最重要的三大概念

轴向对齐弹性

每一个概念都有一个或多个属性来实现

有的作用于父容器上

有的则作用于子容器上

于是在2009年后

W3C给这套方案命名为flex

彻底改变了布局的方式

怎么样是不是很简单？

赶紧上手写点代码练习一下吧~

更多内容，欢迎加大师姐微信：

入群了解课程动态、幕后花絮，还有机会参与到课程制作，成为联合制作人哟

flex布局占满_果冻公开课第九课：打破传统布局方式的flex（上）相关推荐

网页设计图片向上浮动_果冻公开课第六课：5分钟理解浮动布局
浮动,是如何实现页面布局的呢? 它有哪些特质和使用方法? 今天,我们就用5分钟的动画短视频来深入浅出地理解浮动~ 动画视频: 果冻公开课:如何理解浮动布局? 文字解析: 网页儿也能这么图文并茂吗? 假 ...
盒子模型代码_果冻公开课第五课：五分钟理清盒模型的前世今生
果冻公开课第五课:五分钟理清盒模型的前世今生在前端程序员眼中,页面其实可以被视为一个个盒子组成的那么,这些盒子是如何构建起整个页面的呢? 动画视频: 如何理解盒子模型文字解析: 在上一节里面我 ...
北大AI公开课第九课--人工智能在视频中的应用by奇虎360颜水成
最近衰退得厉害,总是不记得自己还有flag要扶,而且还有新的课程要听,不过一想到做事不能虎头蛇尾,所以还是坚持着先把这个事完成再说,加油!之前还把第九讲和第十讲弄混了,其实笔记上有标题,但是因为中间笔 ...
计算机组装课的评课记录,公开课评课记录表.doc
公开课评课记录表瑶湖教学口教研室上公开课评课记录表学院(部)信息学院教研室计算机基础教研室教研室人数10时间11月6日第5节地点S1-214上课教师黄伟力授课课程大学计算机基础授课班级13本 ...
四年级计算机上册说课ppt,小学信息技术人教版四年级上册第5课《演示文稿巧播放》公开课优质课教案比赛讲课获奖教案...
小学信息技术人教版四年级上册第5课<演示文稿巧播放>公开课优质课教案比赛讲课获奖教案小学信息技术人教版四年级上册第5课<演示文稿巧播放>公开课优质课教案比赛讲课获奖教案 1教 ...
flex布局占四分之一_云现在占IT支出的四分之一，并且还在快速增长
flex布局占四分之一 Kim Weins是Flexera的云战略副总裁. 最近对300多位企业IT高管进行的IT支出调查确定了持续向云计算转变的一些重大影响. < Flexera 2020科技 ...
python数据结构算法北京大学_北京大学公开课《数据结构与算法Python版》
之前我分享过一个数据结构与算法的课程,很多小伙伴私信我问有没有Python版. 看了一些公开课后,今天特向大家推荐北京大学的这门课程:<数据结构与算法Python版>. 课程概述很多同学 ...
光子浏览器_光子学公开课第十四期明日开课 | 上海大学金翊教授：三值光学计算机...
导引三值光学处理器用无光态和偏振方向正交的两个线偏振光态表达信息,用旋光器和偏振片制作光学运算器,沿用现有的计算机外设和存储芯片.依据降值设计理论构造出的三值逻辑光学处理器能够根据用户的需要而改变硬 ...
计算机公开课议课术语,最实用的评课用语
评课用语 1.整堂课思路清晰,环节紧凑,重难点突出,设计合理.学生的课堂习惯非常好,每个人都能积极的参与到课堂中,课堂效果较好. 2.精心设计课堂练习,体现趣味性和层次性. 3.老师在教学新知时循循善 ...
偏差与方差、经验风险最小化、联合界、一致收敛—机器学习公开课第九讲
在之前的八讲中我们主要学习了一些具体的算法,但当我们之前学习的算法在实际问题中表现不出理想的效果时,我们接下来应该怎么做?接下来的三讲中我们学习到的主要内容是学习理论,它将会帮助我们找到上面问题的答案 ...

flex布局占满_果冻公开课第九课：打破传统布局方式的flex（上）

flex布局占满_果冻公开课第九课：打破传统布局方式的flex（上）相关推荐

最新文章

热门文章

flex布局 占满_果冻公开课第九课：打破传统布局方式的flex（上）

flex布局 占满_果冻公开课第九课：打破传统布局方式的flex（上）相关推荐

最新文章

热门文章

flex布局占满_果冻公开课第九课：打破传统布局方式的flex（上）

flex布局占满_果冻公开课第九课：打破传统布局方式的flex（上）相关推荐