码迷,mamicode.com
首页 > 其他好文 > 详细

flex布局学习(二)

时间:2017-01-01 22:38:15      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:display   div   margin   isp   code   lex   item   strong   class   

flex布局解决了几个问题

1 margin重叠问题

例如

.item{border: 1px solid green;margin: 30px;}

 

 

    <div style="border: 1px solid red;">
            <div class="item">
                margin重叠为
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
        </div>

正常来说:class为item 的第一个div和第二个div上下之间应该有60px的具体,但是只有30px

        <div style="border: 1px solid red;display: flex;">
            <div class="item">
                margin重叠消除了。 1-2之间时60 2-3之间是60
            </div>
            <div class="item">
                2
            </div>
            <div class="item">
                3
            </div>
        </div>

2 使用flex,清除了float 

    <div style="border: 1px solid red;display: flex;">
            <div class="item" style="float: left;">
                清除了float
            </div>
            <div class="item" style="float: right;">
                2并没在右边显示
            </div>
            <div class="item" style="float: right;">
                3
            </div>
        </div>

 

flex布局学习(二)

标签:display   div   margin   isp   code   lex   item   strong   class   

原文地址:http://www.cnblogs.com/tenyear/p/flex2.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!