笔记：常用 flexbox 布局的一些 SASS Mixin

胡椒 | 2016-05-15

Can I Use Flexible Box Layout Module? Data on support for the Flexible Box Layout Module feature across the major browsers from caniuse.com.

上图是一个嵌入 caniuse 上 Flexible Box Layout Module 现在的浏览器支持情况（使用 @IreAderinokun 做的 The CanIUse Embed 制作），如果看不到可以直接去这里查看。

Flexbox 现在已经很常用，浏览器的适配情况也随着时间的推移渐渐转好，最新的浏览器里几乎都不需要使用 vendor perfix 就可以获得很好的支持。但是，比如说我司的测试同学还用着的 iOS 9 的，我老板还用的 iOS 8，其中的 Safari 对 flexbox 的支持还依赖于 vender perfix，以下是一些常用 flexbox 属性在 SASS 利用 Mixin 封装的一些 fallback。（使用 Gulp 的话也可以利用 gulp-autoprefixer 这样的工具，我在自己的小项目或者测试里使用过，公司项目里暂时还没）。

`display: flex;`

`flex`

`justify-content`

`flex-direction`

`flex-wrap`

`flex-flow`

flex-wrap 和 flex-direction 的结合

`align-items`

`align-content`

`align-self`

`order`

`flex-basis`

All Together

感谢阅读

你们好， 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中，删除了评论区放的 Disqus 插件，考虑有二：首先无论评论、还是对笔记内容的进一步讨论，读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通；其次一年多以来 Disqus 后台能看到几乎都是垃圾留言（spam），所以这里直接贴一下邮件、以及 Twitter 账户地址。

技术发展迭代很快，所以这些笔记内容也有类似新闻的时效性，不免有过时、或者错误的地方，欢迎指正 ^_^。

BEST
Lien（A.K.A 胡椒）