弹性盒子案例(弹性盒子容器)
html5弹性盒子模型宽度设置问题
解决办法，CSS代码修改如下：
#col2{?
??background:#F63;
??box-flex:1;
??-webkit-box-flex:1;
??-moz-box-flex:1;
??width:?0%;???????????/*?加上这行代码?*/
}?
#col3{?
??background:#690;
??box-flex:3;
??-webkit-box-flex:3;
??-moz-box-flex:3;
??width:?0%;???????????/*?加上这行代码?*/
}
所有需要按照比例分解的列，都加上 width: 0%; 已经有固定值的列不需要加，原理不懂。
反正这个应该是CSS3新属性 ?box-orient ?没有完善的原因。
div怎样四个盒子上下左右排列
div怎样四个盒子上下左右排列
方法一（varticle-align）
理念
使用表格单元格的中心属性。
步骤
将div放置在父div之外，同时将其设定为“显示：表”。 宽度是100%
父div被设定为表的单元格元素(显示：表单元格)
父div将属性“垂直对齐：中间”设置为子div位于上下中心
子div以margin配置位于左右中央(margin-left:auto； 边缘光：自动)
例子
样式
* * {马克龙：0； 填充： 0； 盒子缩放：边框； }
.表{显示：表}； width :百分之百； }
. father {显示：表单元}； 垂直对齐：中间； }
. son { margin :自动； }
/样式
主体
div类='表'
divclass=' father ' style=' width :100 %； height: 400px； border :1 pxsolidrebeccapurple；'
divclass=' son ' style=' width :100 px； height: 100px； 背景：地块绿色；' /div
/div
/div
/body注：
的单元格特殊，如果只有一个单元格，则缺省情况下，其宽度为父(table|tr )宽度的100%；
table的缺省宽度不会增加。 width:100%；
方法二(line-height)
理念
如果父div的行高于自己的高度，则内部文字间元素将显示在上下中心。 行中块的高度不固定时，也会显示在上下中央。 文本居中对齐属性text-align:center允许在左右居中显示行内元素或行内块元素。
步骤
子div是内联模块要素(display :内联模块)；
父div设定行高，使子div位于上下中心
父div配置文本的中心(text-align:center )将子div放置在左右中心。
斯泰尔斯
* * {马克龙：0； 填充： 0； 盒子缩放：边框； }
. father {line-height: 500px 文本对齐：中心； 字体大小：0； }
. son {显示：在线模块}；
/*显示器：线上弹性；
显示：在线网格；
显示器：在线表； */
}
/样式
主体
divclass=' father ' style=' width :100 %； height: 400px； border :1 pxsolidrebeccapurple；'
divclass=' son ' style=' width :100 px； height: 100px； 背景：地块绿色；' /div
/div
/body注意：如果将行高设置为当前父div的高度(400px )，则具有固定高度的子div不会显示在中间。 问题是，默认情况下，浏览器位于文本的中心，即作为文本的一部分。 (颜色缺省字体大小：16 px； hight:21px () )进行了定中，设为高度100px，没有进行定中。 所以有必要调整父div的线高度。 字体大小：0 (对应的字体高度为0 )时，在线高度上显示副div的高度(400px 100px； 中显示了当前的缩放比例。
方法三（定位）
理念
使用定位属性(顶部、左侧、右侧、底部)百分比的模式。 100%时，表示偏移的长度
为父div的高度（宽度）的100%。
步骤
父div标记下定位（position:relative|absolute|fixed）;子div绝对定位（position:absolute）
子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;；
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；
例子
style * {margin: 0; padding: 0; box-sizing: border-box;} .father {position: relative;} .son {position: absolute;bottom:50%;margin-bottom: -50px;left: 50%;margin-left: -50px; } /style body div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;" div class="son" style="width: 100px; height: 100px;background: palegreen;"/div /div /body
方法四（定位）
理念：
定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置margin:auto会使它居中显示。
步骤：
父div标记下定位（position:relative|absolute|fixed|sticky）;子div绝对定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto
例子
style * {margin: 0; padding: 0; box-sizing: border-box;} .father {position: relative;} .son {position: absolute; top: 0; bottom:0; left: 0; right: 0; margin: auto} /style body div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;" div class="son" style="width: 100px; height: 100px;background: palegreen;"/div /div /body
方法五（flex）
理念
弹性盒子，自带的一个居中功能
例子
style * {margin: 0; padding: 0; box-sizing: border-box;} .father {display: flex; align-items: center} .son {margin: auto} /style body div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;" div class="son" style="width: 100px; height: 100px;background: palegreen;"/div /div /body
flex兼容性，以及存在的已知问题
css3 弹性盒子放入图片竖着放中间的缝隙怎么回事
设置图片的父元素font-size:0试试.
这个和弹性盒子关系不大,
更多是img间隙问题
以下哪些css3属性可设定弹性盒子模型让子元素反向排列
“以下哪些css3属性” 选项呢？
box-direction 属性用于改变容器的显示顺序,使之反向排列。默认的情况下，block 级元素是按照加载顺序从上到下排列， inline 级元素是从左到右排列的。下面来看看box-direction：
reverse：block 级元素显示在最顶部，最后加载的 inline 级元素显示在左边
弹性盒子文字自适应大小
弹性盒子文字自适应大小是需要设置属性的。属性代码为：
1、order属性。
2、flex-grow属性。
3、flex-shrink属性。
4、flex-basis属性。
5、flex属性。
6、align-self属性。