Flexbox响应式布局

Question

我正在玩flexbox，需要一点帮助。我想要一个大的正方形元素在左边和一个网格的四个较小的元素，这等于第一个到右边的大小。

到目前为止，我有这样的想法：

​

#flex {
  display: flex;
}
.flex-container-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: stretch;
  flex-wrap: wrap;
  margin-left: 10px;
}
.flex-item {
  padding: 10px;
  flex-basis: auto;
  flex: 0 0 47%;
  min-height: 100px;
  margin-bottom: 10px;
  word-wrap: break-word;
  background-color: red;
}

<div style="margin-top:30px;padding-top:1px;" id="flex">
  <div class="flex-item">
    dhhrth rthrthrth rth rhrthrth
  </div>
  <div class="flex-container-inner">
    <div class="flex-item">
      yt e ert et e
    </div>
    <div class="flex-item">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
    </div>
    <div class="flex-item">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
    </div>
    <div class="flex-item">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
    </div>
  </div>
</div>

​

http://codepen.io/DaveBatt83/pen/yVbGQG

我不明白为什么当屏幕的宽度减小时，四个较小的元素堆叠在一起，我也想设置一个较大的元素的最小宽度，以便在某些断点处占据整个宽度。这有可能吗？

我希望第一个项目占据47%的宽度，然后通过添加一个嵌套容器，我希望在嵌套容器中以47%的比例创建两行两个项目。47%是使用空格在它们之间创建一些间距。

这一切似乎都是可行的，但是如果屏幕尺寸减小，那么两行两个项目就变成了四个项目的一列。

Answer 1

为了清楚起见，我更改了嵌套flex-item的名称。很可能是因为您的box-sizing: border-box丢失了，所以遇到了麻烦。

​

#flex {
  display: flex;
  background-color: peachpuff;
  justify-content: space-between;
}
.flex-item,
.flex-container-inner,
.flex-item-inner {
  flex: 0 0 47%;
  box-sizing: border-box;
}
.flex-item,
.flex-item-inner {
  padding: 10px;
  min-height: 100px;
  margin-bottom: 10px;
  word-wrap: break-word;
  background-color: red;
}
.flex-container-inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

<div style="margin-top:30px;padding-top:1px;" id="flex">
  <div class="flex-item">
    dhhrth rthrthrth rth rhrthrth
  </div>
  <div class="flex-container-inner">
    <div class="flex-item-inner">
      yt e ert et e
    </div>
    <div class="flex-item-inner">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
    </div>
    <div class="flex-item-inner">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
    </div>
    <div class="flex-item-inner">
      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
    </div>
  </div>
</div>

​