30分钟彻底弄懂flex布局

转载 30分钟彻底弄懂flex布局

目前在不考虑IE以及低端安卓机（4.3-）的兼容下，已经可以放心使用flex进行布局了。什么是flex布局以及它的好处，这里就不再赘述。

在这篇文章里，想说说flex布局的属性语法及其细节。那么网上也有不少flex布局的教程，为什么又要再写一篇？

首先，flex布局的迷之属性们，如果一知半解，机械记忆的话，那不到半个月基本忘光光。先感受一下这12个flex布局属性，是不是很“迷”人。

容器属性

flex-flow
flex-direction
flex-wrap
justify-content
align-items
align-content

元素属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

就连老外也都在twitter吐槽不好理解，可见还是有一定的学习成本。