flex布局的使用,flex布局使用体会
flex布局怎么设置其中元素的宽度
div实际得宽度＝div宽度＋padding的宽度。想保持一定距离有很多方法：你可以把让现在div的宽度改成减去padding后的宽度，还可以里面欠个div直接设padding。
任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。Webkit内核的浏览器，必须加上-webkit-前缀。
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
使用flex布局，子元素怎么高度自适应
父元素高度设置为空或者auto即可，如height:auto或者不要height;，举例如下: 1.高度采用auto; 这里是子集内容,子集内容采用的是宽度780px,高度1000px,并且居中对齐； 这是父级内容，宽度为800px,高度自适应
左边固定，右边自适应布局(四种方法：负边距、flex)
1、左position:absolute, 右margin-left?
div class="parent"
? ? ? ? div class="l-child"/div
? ? ? ? div class="r-child"/div
/div
//父元素相对定位，作为子元素绝对定位的参考
.parent{display:relative;background:#ddd}
.l-child{position:absolute;width:100px;background:#bbb}
.r-child{margin-left:100px;background:#999}
2、左边float，触发父元素宽度计算?
html结构同上
.parent{background:#ddd;overflow:hidden; }
.l-child{float:left;width:100px;background:#bbb;z-index:10000; }
.r-child{margin-left:100px;background:#999;}
3、左右浮动，右边使用负边距
div class="parent"
? ? ? ? div class="l-box"/div
? ? ? ? div class="r-box"
? ? ? ? ? ? ? ? div class="r-content"中文/div
????????/div
? ? ? ? div class="l-box"中文网/div
./div
.parent{background:#ddd;overflow:hidden; }
.l-box{float:left;width:100px;background:#bbb;}
.r-box{float:right;width:100%;margin-left:-100px;background:#999;}
.r-content{margin-left:100px;}
4、flex布局?
父元素flex布局后，子元素默认就是弹性布局，除非你确定子元素的弹性方式
ps：这个方法完美之处还在于，垂直方向也自动填充，轻松实现了等高布局！！
html同第一个demo
.parent{display:flex;background:#ddd}
.l-child{flex:00100px;background:#bbb}
.r-child{background:#999}