Question

我正在玩flexbox并需要一些帮助。我想要一个左边的大方形元素和一个四个较小元素的网格，它们与第一个到右边的大小相等。

到目前为止，我有这个：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

我不明白为什么当屏幕宽度减小时，四个较小的元素会叠加在一起，我还想设置一个较小的元素的最小宽度，以便它在某些断点处占用全宽。这可能吗

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

这一切似乎都有效，但如果屏幕尺寸减小，则两行中的两行将成为4项中的一列。

Answer 1

为了清楚起见，我更改了嵌套的flex-items的名称。很可能你遇到了麻烦，因为你遗失了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>

Flexbox响应式布局

1 个答案: