前端 - 请教一下CSS布局排列写法？

Question

<div>    <em>1</em>    <em>2</em>    <em>3</em>    <em>4</em></div>

不改变HTML下如何使用flex或grid，将其排列成下列效果？
1和4自适应，2与3成上下两行，占剩余空间。

Answer 1

<template>  <div class="container">      <div class="one">11111</div>      <div class="two">2</div>      <div class="three">3</div>      <div class="four">444444</div>  </div></template><style lang="scss">.container {  display: grid;  grid-template-columns: auto 1fr auto;  grid-template-areas:       "左 中上 右"      "左 中下 右";  div{    background: #ccc;    border: 5px solid #fff;  }}.one { grid-area: 左;}.two { grid-area: 中上;}.three { grid-area: 中下;}.four { grid-area: 右;}</style>

Answer 2

用flex布局：

div {  display: flex;  justify-content: space-between;}em:nth-child(2), em:nth-child(3) {  flex-grow: 1;  display: flex;  flex-direction: column;  justify-content: space-between;}

grid布局：

div {  display: grid;  grid-template-columns: auto 1fr auto;  grid-template-rows: auto auto;}em:nth-child(1) {  grid-column: 1;  grid-row: 1 / span 2;}em:nth-child(2) {  grid-column: 2;  grid-row: 1;}em:nth-child(3) {  grid-column: 2;  grid-row: 2;}em:nth-child(4) {  grid-column: 3;  grid-row: 1 / span 2;}