Question

我想在一个div里用flex方式做出这种布局，请教应该怎么做

①到⑦都是父div的子div，①是纵向最长的子div，②到⑦是其他6个子div，现在我希望①~④的width相等，样子就像图片的这样，最好使用flex布局，因为表格布局不好添加子div（考虑到父div的width变大后，一行要变得能放更多个子div），使用float虽说是个不错的选择但我要怎么保证每列的width相等且正好填充满父div呢，我想使用flex的是考虑的有一个flex:1的属性，会自动填充满父div，而且子div设置min-width后父div的width变大后也容易在行里增加子div，但无法保证①和②③④的width相等，求给一个比较好的方案！

Answer 1

<div class="center">
    <div class="left">
        1
    </div>
    <div class="right">
        <div class="div d2">2</div>
        <div class="div d3">3</div>
        <div class="div d4">4</div>
        <div class="div d5">5</div>
        <div class="div d6">6</div>
        <div class="div d7">7</div>
    </div>
</div>
<style>
.center{width:800px; height:300px; margin:auto; background:#DC4244;}
.center .left,.cente .right,.center .right .div{float:left;}
.center .left{height:300px; background:#7353F3;}
.center .right .div{height:150px;}
.center .left,.center .right .div{width:25%;}
.center .right .d2,.center .right .d4,.center .right .d6{background:#E616EC;}
</style>

效果如图

追问

非常感谢但是，有一个很重要的属性就是，当“.center”的width扩大后，后面子元素可以加入空白扩大后的空白（在width很小时靠近more的div是隐藏的），以填满.center，而不是用百分比填满它。就像这几张图片似得，不同的是第一个div是跨行的

Answer 2

不是很好弄，仔细研究一下flex