flex固定每⾏数量_display：flex多栏多列布局
display:flex 多栏多列布局浏览器⽀持情况：⽕狐直接⽀持w3c⽆前缀写法，⾕歌和opera⽀持-webkit- 前缀写法，⽐较适合移动端开发使⽤，
display:flex 这个⽜逼的css3布局属性，遗憾的是只有⾕歌和⽕狐⽀持，
中国⼈常⽤的⼿机上的浏览器⼏乎全军覆没，UC浏览器不⽀持，安卓4.1.1和之前版本⼿机⾃带的浏览器也不⽀持，⾃带浏览器也不⽀持。
看来要留给⼉⼦们⽤了。
⽰例:html,body{ padding:0; margin:0;}
/*
flex-flow: row wrap; row横向(左向右)显⽰ column竖向(上向下)显⽰ wrap⼀⾏显⽰不完的时候换⾏
*/
.col{ border:red solid 1px;}
footer { height:300px;
display: -webkit-flex;
-webkit-flex-flow: row;
-webkit-align-items: stretch;
-webkit-justify-content:space-between;
/*IE10还不⽀持*/
display: -ms-flex;
-ms-flex-flow: row wrap;
-ms-align-items: stretch;
-ms-justify-content:space-between;
display: flex;
flex-flow: row;
align-items: stretch;
justify-content:space-between;
}
.col2{-webkit-flex:1;-moz-flex:1;flex:1}
display:flex 的HTML测试结构
jquery
特效
前端路上
懒
⼈
建
站
⼀个Flexbox布局是由⼀个伸缩容器(flex containers)和在这个容器⾥的伸缩项⽬(flex items)组成。伸缩容器(flex  containers)是⼀个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有⼦元素都会⾃动变成伸缩项⽬(flex  items)。
这有⼀个三列布局的例⼦。外⾯的div容器是⼀个伸缩容器，⽽⾥⾯的left、main和right三个div都是伸缩项⽬：
设置⼀个简单的伸缩容器很容易，代码如下：
.container {  display: flex;}        伸缩⽅向与换⾏(flex-flow)
伸缩容器有⼀个CSS属性“flex-flow”⽤来决定伸缩项⽬的布局⽅式。如果伸缩容器设置了“flex-flow”值为“row”，伸缩项⽬排列由左向右排列：
如果“flex-flow”值设置为“column”，伸缩项⽬排列由上⾄下排列：
这⾥将展处样设置伸缩容器，使⽤伸缩项⽬在⼀⾏中显⽰：.container {  display: flex;  flex-flow: row;}        ⼀个伸缩容器中的所有伸缩项⽬既可以排列在单⾏也可以多⾏排列。这个主要由“flex-flow”是否设置为“wrap”来决定。如果伸缩容器设置了“wrap”属性值，当伸缩项⽬在伸缩容器中⽆法在⼀⾏中显⽰的时候会另起⼀⾏排列。
这⾥展⽰了如何将伸缩容器设置为“wrap”:.container {  display: flex;  flex-flow: row wrap;}伸缩项⽬(flex items)
在伸缩容器中的所有⼦元素都将⾃动变成伸缩项⽬。没有额外配置CSS的必要。你唯⼀需要的做的就是设置伸缩项⽬的尺⼨。
如果伸缩容器把“flex-flow”设置为“row”后，伸缩项⽬将需要设置他们的宽度。伸缩项⽬的⾼度将会⾃动设置为伸缩容器的⾼度：
如果伸缩容器把“flex-flow”设置为“column”后，伸缩项⽬将需要设置他们的⾼度，伸缩项⽬的宽度将会⾃动设置为伸缩容器的宽度：
给伸缩项⽬设置“width”和“height”属性来定义伸缩项⽬尺⼨，⽽这个伸缩项⽬是独⽴于其他伸缩项⽬。例如，如果我们给主内容(content)设置了⼀个600px的宽度，不管伸缩容器中有⼀个、两个或者上百个
伸缩项⽬，主内容的宽度都是600px。如果你想伸缩项⽬根据伸缩容器剩余的空间来决定伸缩项⽬的宽度，你可以使⽤“flex”属性。例如，我们可以告诉浏览器，左边栏和右边栏占⽤了伸缩容器减去主内容宽度的空间。
css布局左边固定右边自适应flex的值于对应的空间成正⽐。如果左边栏设置了值为“1”和右边栏设置了值为“2”，伸缩容器剩余的空间将按⽐例分配给左边栏和右边栏，并且右边栏所占的空间是左边栏的两倍：
下⾯是⽰例中运⽤在伸缩项⽬上的⼀些代码，展⽰了独⽴宽度和按⽐例计算的宽度：.main {  width: 600px;}.left {  flex: 1;}.right {  flex: 2;}完整的实例
这是⼀个很简单的实例，Flexbox创建了⼀个经典的三列布局。主内容宽度为60%，⽽边栏是使⽤“flex”属性，按⽐例⾃动根据伸缩容器剩余空间计算得到对应的宽度：
HTML结构
…      …    …
CSS代码
.container {  display: flex;  flex-flow: row;}.main {  width: 60%;}.left {  flex: 1;}.right {  flex: 2;}⽰例效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。