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

对于 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 属性来完成的。

有兴趣的可以访问这个链接地址去看看：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/…

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

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

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