行间容器html,html – 具有四个div的Flex容器,需要三列,第二列有两行

假设这将是您页面的主要布局,您可以尝试设置固定高度并使用flexbox的列方向：

.flex_container {

height: 100vh; /*adjust this value like you want*/

display: flex;

flex-direction: column;

flex-wrap:wrap;

}

.flex_child {

background:purple;

border:2px solid #fff;

box-sizing:border-box;

width:calc(100% / 3);

}

.square {

flex:1 1 100%;

}

.rect {

flex:1 1 47%;

}

body {

margin: 0;

}

如果你想要一个更好的浏览器支持,你可以使用float / inline-block,稍微调整一下在开始时使用2个方块的类：

.flex_container {

height: 100vh; /*adjust this value like you want*/

}

.flex_child {

background:purple;

border:2px solid #fff;

box-sizing:border-box;

width:calc(100% / 3);

height:100%;

}

.square:nth-child(1) {

float:left;

}

.square:nth-child(2) {

float:right;

}

.rect {

display:inline-block;

height:50%;

vertical-align:top;

}

body {

margin: 0;

}

如果您还无法更改类,请使用一些负边距来纠正最后一个元素的位置：

.flex_container {

height: 100vh; /*adjust this value like you want*/

}

.flex_child {

background:purple;

border:2px solid #fff;

box-sizing:border-box;

width:calc(100% / 3);

height:100%;

}

.square:first-child {

float:left;

}

.square:last-child {

float:right;

margin-top:-50vh;

}

.rect {

display:inline-block;

height:50%;

vertical-align:top;

}

body {

margin: 0;

}