<html>
<script>
</script>
<style>
.main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
border: 1px solid;
height: 100%;
}
.mian1{
display: flex;
flex-direction: column;
}
.item {
height: 100%;
width: 48%;
background-color: pink;
margin-right: 10px;
margin-bottom: 10px;
}
.itemx{
height: 45%;
width: 100%;
margin-right: 10px;
margin-bottom: 10px;
background-color:aqua;
}
/* .item1{
height: 100px;
} */
</style>
<div>
<div class="main">
<div class="item item1">1</div>
<div class="item">
<div class="main1">
<div class="itemx">1</div>
<div class="itemx">2</div>
</div>
</div>
<!-- <div class="item">3</div> -->
</div>
</div>
</html>