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

【问题标题】：Flexbox: Container with two different directionsFlexbox：具有两个不同方向的容器
【发布时间】：2017-03-22 21:20:25
【问题描述】：

我正在尝试做这样的事情：

Link - 线框

Container 定义屏幕尺寸（100vw，100vh），Box 将内容居中（水平和垂直对齐）。

两个Box是按行显示的，Text应该是按列显示的。 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>

【问题讨论】：

你能提供你目前尝试过的代码吗？
当然@Mistalis，刚刚更新。谢谢！

标签： css flexbox

【解决方案1】：

这是你想要的吗？

* {
  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;
}

<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>

【讨论】：

是的，非常接近。我不能做的是将垂直 div (box_half) 分成 2 个 text div（我可以在其中使用 flex-grow，也许）。我需要创建这样的东西：i.stack.imgur.com/gEnMt.jpg

【解决方案2】：

li 也应该显示为 flex 并且它的 flex-direction 应该是列。它只是嵌套的 flex。

【讨论】：

我认为第二种更合理，但如果你按照我关于嵌套柔性显示的逻辑，你会想怎么解决它。
好的，我试试。谢谢！