html中两行三列怎样写,html – Flexbox 3 divs,两列,一列有两行

哈金方法：

*不推荐(我相信你会注意到为什么)

.flex-body {

display: flex;

flex-direction: row-reverse;

flex-wrap: wrap;

justify-content: flex-end;

align-content: stretch;

align-items: stretch;

transform: rotate(90deg);

max-width: 500px;

margin: auto;

}

.flex-body div {

border: 1px solid white;

height: 300px;

flex: 1 1 200px;

}

.flex-body div:last-of-type {

flex: 1 1 300px;

height: 300px;

}

合法方法：

*推荐的

.flex-row {

flex-direction: row;

display: flex;

}

.flex-column {

flex-direction: column;

display: flex;

}

.flex-body {

display: flex;

}

.flex-body div:not([class*="flex"]) {

border: 1px solid white;

flex: 1 1 200px;

width: 300px;

}