如何使不同大小的盒子以某种方式并排在一起

.container {
  display: flex;
}

.box {
  flex: 1; /* 设置盒子的比例，可以根据需要调整 */
}

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 设置3列，可以根据需要调整 */
  grid-gap: 10px; /* 设置盒子之间的间距，可以根据需要调整 */
}

.box {
  grid-column: span 1; /* 设置盒子占据的列数，可以根据需要调整 */
  grid-row: span 1; /* 设置盒子占据的行数，可以根据需要调整 */
}

<div class="container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
</div>