flex 布局 - 掘金

git原文url：https://github.com/zhupoyan/blog/blob/master/language/css/flex.md

更新动态：

2018.9.8: 前端语言专栏-css-flex布局(C)

主要参考：

Flex 布局教程：语法篇

Flex 布局教程：实例篇

flex兼容性查阅：

caniuse.com/#search=fle…

文章demo项目url：'./demo/flex'

正文

背景：

flex布局目前已经被大部分浏览器所支持，但是由于本人之前工作中接触的很多项目要考虑兼容低版本浏览器，所以flex布局用的频率不是特别高，尽管很早就关注这个东西。

所以当遇到一些不需要考虑兼容问题的项目，写页面布局的时候，心想，终于能够放心的用flex布局了！接着一顿开荤，刷刷刷的看似很熟练的就把代码写上去了，打开页面发现，咦，怎么跟想象中的效果不太一样（o(￣︶￣)o）？

然后上网翻翻一些技术文章或者文档啥的，觉得自己好像写的也没啥问题，大概是哪个属性不对吧？然后一顿瞎改。这个时候通常就是两个结果，一是运气好的可能就真的改出了自己想要的样式，但是哪天需要调整的时候发现不会调了，怎么调怎么崩；二是怎么改都没改出来效果。包括本菜在内也经历过这个阶段= =。

于是乎觉得自己太渣了，不行我不能当个渣渣，我可是个有梦想的人！一跺脚就花时间去攻读研究flex布局这玩意，搞完发现研究前跟研究后真的是两个世界，有些内容还是我写完这篇文章才发现的呢！现在也可以很大胆的去用它了。下面就开始跟大家分享一下心得。强推附属的demo项目，文章内的附图都摘自其中，建议大家都下载下来看看。

正题：

本人认为没有必要写的内容，例如各个属性分别能取哪些值之类的太直白的东西，就不写入这里了，大家可以参考开头的参考链接，阮一峰大神在他的文章内已经介绍的很清楚，占用太大篇幅可能你们也不愿意看下去，主要针对平常可能经常碰到的问题进行分析。

首先我们得搞清楚flex布局是针对什么情况使用的，我们需要记住的是它是一种布局方式。一般我们在写页面布局时，都是先从整体到局部，分析哪些内容应该出现在哪一块，这个“块”我喜欢称之为“容器”。布局如果不合理，不但往下写的时候会发现越写越不对劲，而且就算强行完成了，之后如果要修改部分样式都会非常麻烦。

照我看来flex布局适用于，父容器内的子容器，需要 自然撑开 ，即父容器空间足够时，子容器能自然撑开到设置的比例/数值宽度；父容器空间不足时，子容器能自然收缩到设置的比例/数值宽度。

对于不需要自然撑开的布局，例如确定是固定宽度的容器，也可以使用flex布局，只不过这种情况就不能突出flex布局它的特点，使用是完全没问题的。

那么相比于我们平常使用的其它布局，flex布局有什么优点呢？我们可以快速的大致聊一下平常会使用到的布局，就拿我平常工作中遇到的情况举例（据说每个布局都有它的名字，然鹅本人认为记住那些名字完全没卵用，记住了又不一定会用，会使用了才是硬道理，虽然说不出名字但我可以给你们描述一下。）。

在使用flex布局之前本人使用最多的是，父容器display: block，子容器display: inline-block，但是为了解决inline-block会出现间隙的问题，经常需要给父容器加上font-size: 0，然后由于子容器的font-size继承了父容器的font-size，所以需要给每个子容器特地去写一个font-size，否则就看不到字眼大小了，有些基础比较差的同学可能还会被吓到，心想“诶怎么会这样！为啥不管我打多少个字眼页面上都不显示！”（别笑话，我也是经历过这个过程的人= =）。那么如果使用flex布局，就不存在这个问题了，因为它是flex（这个理由够充分吧！很强势！）。那可能有人就会说了，我觉得加font-size: 0不麻烦呀！确实，我也觉得不麻烦，可是从逻辑的合理性去考虑，为了解决inline-block的间隙这个问题就需要专门加一个这个属性，其实是欠妥的，反观flex，在这个问题上是完美解决的。然后的话inline-block是做不到flex特有的自然撑开的效果的，即使是写N个媒体查询也做不到flex的那种自然的效果。

另外用的很多的应该是float，原谅本菜一直对float深恶痛疾，看到这个词脑海里就浮现出它的N个缺点。比如“既然用了它，你就要对它负责任。”，用了还得手动清除float，并且清除float的方法还有好几种？！再并且每种方法都有其优劣性？！（不了不了.jpg）但是不可否认的是float布局如果掌握的很6，那么用起来还是游刃有余的，不太推荐入门的同学使用，但是掌握它还是必须的！

所以说到这里flex的优点就比较明显了。

接下来就一起看看flex的正确的打开方式和一些需要关注的点吧！