Flexbox：具有两个不同方向的容器

Question

我试图做这样的事情：

Link - 线框

容器定义屏幕尺寸（100vw，100vh）和框将内容置于中心（水平和垂直对齐）。

两个框是按行，文字 div应按列显示。是否可以使用Flexbox？

第一个解决方案

HTML

.container{
list-style: none;
align-items: center;
justify-content: center;
display: flex;
height: 100vh;
}

.box{
width: 90vw;
height: 90vh;
display: flex;
}

.box li{
margin: 25px;
box-shadow: 0px 10px 30px rgba(0,0,0,0.2);
}

.image-1{
background-color: yellow;
height: 20vh;
width: 100%;
}

.image-2{
float: left;
background-color: dodgerblue;
height: 10vh;
width: 10vw;
}

.text{
background-color: orange;
height: 10vh;
width: 100%;
}

CSS

<div class="container">
    <div class="box">
        <li style="flex-grow:1">
            <div class="image-1"></div>
            <div class="image-2"></div>
            <div class="text"></div>
        </li>
        <li style="flex-grow:1"></li>
    </div>
</div

第二个解决方案

CSS

.container{
padding-left: 20px;
padding-right: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 100vh;
}

.container li{
padding-left: 15px;
padding-right: 15px;
margin: 5px;
height: 70vh;
width: 50vw;
}

.box{
margin-top: 15px;
height: 120px;
width: 100%;
background-color: orange;
}

HTML

<div class="container">
    <li>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </li>

    <li>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </li>

    <li>
        <div class="box"></div>
        <div class="box"></div>
    </li>

</div>

Answer 1

li也应显示为flex，其flex-direction应为列。这只是和嵌套flex。

Answer 2

这是你想要的吗？

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.container {
  width: 90%;
  margin: 0 auto;
  height: 90vh;
  border: 1px solid red;
}

.box {
  display: flex;
  height: 100%;
  border: 1px solid yellow;
  flex-direction: row;
}

.box__half {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
}

.box__half:first-child {
  background: yellow;
}

.box__half:last-child {
  background: orange;
}

.text {
  width: 90%;
  height: 30vw;
  border: 1px solid green;
  margin: 3% 0;
}

＆＃13;

<div class="container">
  <div class="box">
    <div class="box__half">
      <div class="text"></div>
      <div class="text"></div>
      <div class="text"></div>
    </div>
    <div class="box__half">
      <div class="text"></div>
      <div class="text"></div>
      <div class="text"></div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;