核心提示:使用flex (1)原理、用法原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、mar...
使用flex (1)原理、用法
原理:通过设置CSS3布局利器flex中的flex属性以达到多列布局。
用法:先将父框设置为display:flex,再设置左框flex:1,最后设置左框width、margin-right。
<style type="text/css">
.parent{display:flex;border: 1px solid green;}
.left{width: 100px;margin-right: 20px;border: 1px solid blue;}
.right{border: 1px solid red;flex: 1;border: 1px solid yellow;}
</style>
<p class="parent">
<p class="left">left</p>
<p class="right">
<p>rightrightrightrightrightrightright</p>
<p>right</p>
</p>
</p>


