对于 CSS 中的 flex 弹性布局,曾经我在公众号里写过《一点点对 flex 布局有关的看法》和《又一次想说 flex 布局挖坑给你,信吗?》,印象中最深的一个点,是我在文中提到的对于 flex 的这个属性中的三个属性值怎么用的话题。如果你有兴趣的话,可以点击链接再去看看,不想看的可以直接想一下:
flex: 1 1 auto;flex: 1 0 auto;flex: 0 0 200px;flex: 1 0 200px;flex: 0 0 auto;flex: 0 0 200px;
反正就是这样的一种组合形式,明白的肯定都明白,其实很简单,就是 flex-grow、flex-shrink 以及 flex-basis 的组合。怎么组合,怎么用,就靠自己的理解去运用了。就目前为止,没说当 flex-grow: 1; 时,在父元素用后不同的 width 基础下,这个可以算出来子元素的 width 值是多少 px。个人认为这样算出来也是没有意义的,毕竟 flex 是弹性布局。
在说正事 之前,我还想提一个就是很早之前,我曾经整过一个“同 HTML 结构根据不同样式而改变布局”的页面。
这个页面是几年前写的,具体多少年,我忘了,反正挺久了。记得当时业界内,大家对于《禅意花园》这本书的热情似乎也是逐渐变淡的时间把。至于多久了,这个并不重要,关键是当时写这个的时候,我用的是负边距和浮动的一些结合吧,好像后来加了一点 transition 而已。总之呢,就是在不改变 HTML 结构的前提下,只是修改了部分 CSS 属性来完成的。
有兴趣的可以访问这个链接地址去看看:http://lab.tianyizone.com/layout/
回到这次要说的主题,前面提到了 flex,也提到了同一个 HTML 结构根据样式而改变页面布局;那么现在,我们可以通过 flex 的方式更轻松的实现了。
class="pages"> <header class="header">header>
class="main">main>
class="side">aside>
class="extend">aside>
class="footer">footer>
</div>
结构很简单,假设是有一个头一个尾,中间是主要内容和两个侧边栏的结构。如果只想要一个侧边栏,那么可以把另外一个删掉或者 display: none; 都无所谓了。
通过这样的一个简单的结构,我们利用 flex 相关的属性可以实现一行一列、一行两列、一行三列的布局方式,还可以有一列固定宽度,其他几列自适应等各种情况。那些所谓的“圣杯布局”、“双飞燕布局”也是分分钟可以实现,甚至我们可以直接实现一行 N 列的横向布局。
.pages { display: flex; flex-wrap: wrap; flex-direction: row;}
父级元素中我们通过 flex-wrap 和 flex-direction 来控制子元素的排列方式,如果有兴趣的还可以把 display: flex; 改成 display: inline-flex; 来看看效果。
.header { order: 1; flex: 1 1 100%;}.main { order: 1; flex: 1 1 auto;}.side { order: 2; flex: 0 0 25%;}.extend { order: 3; flex: 0 0 200px;}.footer { order: 4; flex: 1 1 100%;}
子元素就简单了,只需要用到 order 和 flex 属性就可以了。
通过 order 的数值改变元素的显示位置
flex 中三个属性值控制元素是否需要弹性缩放
如果不需要弹性缩放的话,再设置一个值表示这个元素所占据的宽度是多少即可;
如果需要弹性的话,也可以考虑设置元素所占据的最大的宽度值
最终怎么变化,完全很自由。不过要做一行多列,并且 flex-wrap: wrap; 时,要注意一行中能否容下的宽度,否则会出现换行的情况。也就是因为这样,在这个 demo 中,头尾两个部分我使用了 100%,就是要让其撑满父元素的空间。
为了方便看效果,我在 demo 中加了几个简单的修改属性的方式。通过 GIF 截图可以看到,要改变布局真的很容易,再也不用像以前那样繁琐的操作了,而且 HTML 结构还简单明了。
很多人在用 flex 的时候,其实就是很简单的想着所谓的弹性布局,或者觉得直接写了一个 flex:1; 之后就可以得到页面效果,那么最终是否真的完全利用好这个 flex 弹性布局呢?
现在的浏览器对于 flex 的兼容性是日渐完善了,几乎很难见到不兼容 flex 布局的浏览器了,当然也不排除还有这样的浏览器的存在。可这无所谓啊,当你选择使用了 flex 弹性布局的时候,肯定是了解过访问你的站点,你的页面的那些用户,就算没了解过,也应该是知道自己的用户群体大概是一些怎么样的人,对吧。
当然,上面那个 demo 的截图主要还是桌面端的浏览器的布局方式居多,在移动端,应该不会有那么多列的布局方式。其实没什么,我只是在想这个 flex 弹性布局应该怎么用比较好,并不是说一定要这样的布局方式。毕竟 CSS 是灵活的东西,我们不能一板一眼地去运用,要根据具体情况进行具体的分析。
http://linxz.github.io/tianyizone/free-flex.html
上面这个 URL 地址就是 demo 效果,再附上一张图,是目前为止在 github 上自己所放的一些小东西。