运用盒子进行网页设计

img


这种网页设计思路是什么呀，分成多个盒子有点搞不清楚，刚刚学习盒子，求讲讲思路

1行3列，最后一列2行，2列，示例代码如下

img

<!doctype html>
<meta charset="utf-8" />
<style>
    .conainer{max-width:960px;margin:0 auto}
    .col3,.col2{display:flex;flex-wrap:wrap;height:300px}
    .col3 .item{width:33.33%}
    .col2 .item{width:50%}
</style>
<div class="conainer">
    <div class="col3">
        <div class="item" style="background:#eee">item1</div>
        <div class="item" style="background:#ccc">item2</div>
        <div class="item col2">
            <div class="item" style="background:#eee">item3-1</div>
            <div class="item" style="background:#ccc">item3-2</div>
            <div class="item" style="background:#ccc">item3-3</div>
            <div class="item" style="background:#eee">item3-4</div>
        </div>
    </div>
</div>

img


        <div style="display:flex;">
            <div>
                <div>图片</div>
                <div>内容</div>
            </div>
            <div>
                <div>图片</div>
                <div>内容</div>
            </div>
            <div style="display:flex;">
                <div style="width:50%">
                    <div>图片</div>
                    <div>内容</div>
                </div>

                <div style="width:50%">
                    <div>图片</div>
                    <div>内容</div>
                </div>
                <div style="width:50%">
                    <div>图片</div>
                    <div>内容</div>
                </div>
                <div style="width:50%">
                    <div>图片</div>
                    <div>内容</div>
                </div>
            </div>
        </div>