flex 方式的布局你用对了吗？

左手的ㄟ右手 2022-01-19 02:15 334阅读 0赞

对于 CSS 中的 flex 弹性布局，曾经我在公众号里写过《[一点点对 flex 布局有关的看法][flex]》和《[又一次想说 flex 布局挖坑给你，信吗？][flex 1]》，印象中最深的一个点，是我在文中提到的对于 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 属性来完成的。

有兴趣的可以访问这个链接地址去看看：[lab.tianyizone.com/layout/][lab.tianyizone.com_layout]

回到这次要说的主题，前面提到了 flex，也提到了同一个 HTML 结构根据样式而改变页面布局；那么现在，我们可以通过 flex 的方式更轻松的实现了。

<div class="pages"> <header class="header"></header> <main class="main"></main> <aside class="side"></aside> <aside class="extend"></aside> <footer 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 是灵活的东西，我们不能一板一眼地去运用，要根据具体情况进行具体的分析。

[linxz.github.io/tianyizone/…][linxz.github.io_tianyizone]

上面这个 URL 地址就是 demo 效果，再附上一张图，是目前为止在 github 上自己所放的一些小东西。

本文主要是发在个人的微信公众号中，有兴趣的可以关注我的公众号，不时更新发牢骚。[mp.weixin.qq.com/s/Y1oX2WHJR…][mp.weixin.qq.com_s_Y1oX2WHJR]

转载于:https://juejin.im/post/5c8f045df265da681c1f1cc0

[flex]: https://link.juejin.im?target=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI1MTA2MDcyOQ%3D%3D%26amp%3Bmid%3D2649567472%26amp%3Bidx%3D1%26amp%3Bsn%3D87497ea91d7dcfd8d89e60d6c0c0b9f7%26amp%3Bchksm%3Df1e15866c696d170a16502398f768b2b1727b2e1e2ddcf95451addf2ecddbe110bf032328eae%26amp%3Bscene%3D21%23wechat_redirect
[flex 1]: https://link.juejin.im?target=http%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzI1MTA2MDcyOQ%3D%3D%26amp%3Bmid%3D2649567552%26amp%3Bidx%3D1%26amp%3Bsn%3D1d7ae5e9cc12fd38c2576f659c71056b%26amp%3Bchksm%3Df1e159d6c696d0c0a972e5f5c6993ff0347fd0fa70b045f4798ed649098a7f58be1ad1954ccd%26amp%3Bscene%3D21%23wechat_redirect
[lab.tianyizone.com_layout]: https://link.juejin.im?target=http%3A%2F%2Flab.tianyizone.com%2Flayout%2F
[linxz.github.io_tianyizone]: https://link.juejin.im?target=http%3A%2F%2Flinxz.github.io%2Ftianyizone%2Ffree-flex.html
[mp.weixin.qq.com_s_Y1oX2WHJR]: https://link.juejin.im?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%2FY1oX2WHJR__4kM81vdGlwA