新学flex布局，怎么用flex实现这种布局

Question

新学flex布局，怎么用flex实现这种布局

Answer 1

可以参考阮一峰老师的 flex 教程( http://www.ruanyifeng.com/blo... )。
图中这种布局类似这篇博文里实现的点数为 4 的骰子。

Answer 2

思路：
父级使用flex，子元素会像inline元素一样在一行显示，当然flex-direction为默认情况，当flex-direction设置为column时会上下排列。
所以分为左右两边left和right，test使用display: flex;
至于flex-direction和flex: 1等更多flex用法自己去看资料学习

<div class="test">
    <div class="left">
        <div class="a-wrapper">
            <div class="test-item a"></div>
        </div>
        <div class="test-item b"></div>
    </div>
    <div class="right">
        <div class="test-item c"></div>
    </div>
</div>

.test {
            display: flex;
            width: 600px;
            height: 400px;
        }
        .test .test-item {
            width: 200px;
            height: 40px;
        }
        .a {
            background-color: #000;
        }
        .b {
            background-color: #f00;
        }
        .c {
            background-color: #ff0;
        }
        
        .left, .right {
            display: flex;
            flex-direction: column;
        }
        .left .a-wrapper {
            flex: 1;
        }
        .right {
            flex: 1;
            align-items: flex-end;
        }

Answer 3

<style type="text/css">
.flex-row {display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;}
.flex-row > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-row > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}

.flex-column {display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;}
.flex-column > .flex-main {-webkit-flex:1 1 auto;flex:1 1 auto;}
.flex-column > .flex-side {-webkit-flex:0 0 auto;flex:0 0 auto;}

.cell {min-width:10em;}
</style>

<div class="flex-column">
    <div class="flex-side flex-row">
        <div class="flex-side cell" style="background-color:blue"></div>
        <div class="flex-main"></div>
        <div class="flex-side"></div>
    </div>
    <div class="flex-main">
    </div>
    <div class="flex-side flex-row">
        <div class="flex-side cell" style="background-color:green">&ensp;</div>
        <div class="flex-main"></div>
        <div class="flex-side cell" style="background-color:red">&ensp;</div>
    </div>
</div>

Answer 4

这种布局很多方式可以实现，这种不建议用flex