flex布局学习

Posted 2020-08-26

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>