Html 在一个容器内使用两个弯曲方向

如何在一个容器内创建以下布局。可能吗

我知道我可以使用

display:flex；对齐内容：居中，对齐项目：居中

以使它们全部居中，但我可以选择将两个div放入列而不是行中吗

我基本上想要这个：

我正在试验这个代码

.container{
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
对齐内容：居中对齐；
对齐项目：居中；
边框：1px纯白；
高度：600px；
寡妇：700像素；
}
.货柜组{
浮动：对；
}
.货柜部：第n个子（3）{
柔性流动：柱；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7

使用Flexbox和多个容器的解决方案

<section class="container">
      <div>Item 1</div>
      <div>Item 2</div>
      <div class="flex-col-container">
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </div>
      <div>Item 6</div>
      <div>Item 7</div>
</section>
.container{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    border: 1px solid white;
    height: 600px;
    widows: 700px;
}

.flex-col-container {
    display: flex;
    flex-flow: column wrap;    
}

.container div {
  border: 1px solid black;
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7
.集装箱{
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
对齐内容：居中对齐；
对齐项目：居中；
边框：1px纯白；
高度：600px；
寡妇：700像素；
}
.flex col容器{
显示器：flex；
柔性流：柱包裹；
}
.货柜组{
边框：1px纯黑；
}

Flexbox 可以使用flexbox和属性实现布局

对于所有弹性项目，

order

的默认值为

0

。这意味着它们的顺序是由它们在源代码中的出现顺序决定的

通过更改第3项和第5项的

顺序

和

弹性基准

值，可以使它们分别出现在第一行和最后一行

.container{
显示器：flex；
柔性包装：包装；
文本对齐：居中；
}
div{
弹性：1；
}
分区：第n个孩子（3）{
顺序：-1；
弹性基准：100%；
}
分区：第n个孩子（5）{
顺序：1；
弹性基准：100%；
}

项目1
项目2
项目3
项目4
项目5
项目6
项目7

您需要将3,4,5包装到另一个flex容器中才能实现这一点，如果我可以问@Michael_B？=），那么这个简单的解决方案会是什么样子我愿意使用多个容器以及解决方案，@karthick。我只想要显示的布局：）当然。我什么都愿意！：）@Michael_B:网格是我的一个选择：）