flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案。它可以简便,完整,完成页面的布局。目前,它已经得到所有浏览器的支持。
但是flexbox从2009年以来,有各种版本的变化,比如2009年版本和2011年版本差别比较大。
每个新事物出现都有其历史使命的。flexbox也是如此,传统的布局依赖于屏幕的宽度和高度,或者依赖于计算的百分比,但是flex则是直接按照比例关系进行布局展示。
这样做的好处就是当屏幕进行拉升等情况的时候,flex布局的页面仍然符合我们的预期。
比如一个横排布局
|-----|-----|----------| | 1 | 1 | 2 | |-----|-----|----------|
平时的布局情况我们就会为1设置宽度25%,2设置宽度50%。但是这个时候,如果我们要变成下面这个布局呢?
|-----|-----|-----|----------| | 1 | 1 | 1 | 2 | |-----|-----|-----|----------|
那么我们就需要重新设置比例了,1比例为20%,2比例为40%。
在flexbox中,我们就可以直接设置一个横排为一个flex容器,然后子结构1的比例为1(flex:1),自结构2的比例为(flex:2)。
强烈推荐(《A Complete Guide to Flexbox》)[ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ]。文章图文并茂地说了各个属性的各种含义。
; 子元素的排序
; 分配剩余空间的比例
; 分配溢出空间的比例
| auto;