使网格响应其父宽度答案

【问题标题】：Make a grid responsive to its parent width使网格响应其父宽度
【发布时间】：2018-08-18 23:25:14
【问题描述】：

我有一个这样的 HTML 结构：

    <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>

其中类“行”的宽度：其父级的 100%，并且父级宽度会随时间而变化。

我的目标是具有“半行”类的两个 div 必须内联并占据“行”div 的 50%。如果“行” div 的大小低于 640 像素（因此半行将

欢迎提出任何建议。谢谢

【问题讨论】：

你尝试过弹性盒子吗？表现出自己的努力是有礼貌的。现在看起来您希望其他人创建您的项目。 css-tricks.com/snippets/css/a-guide-to-flexbox
@Daniel，你说得对，我已经在尝试使用 flexbox，但我没有这方面的经验。我的建议请求是针对那些可以指导我使用 flexbox 的哪些属性以及如何设置它们的人。我将在我的第一次尝试中添加几行 css 的问题。谢谢你的链接

标签： html css flexbox css-grid

【解决方案1】：

@S.C.是的，flexbox 是要走的路，我也建议阅读CSS-tricks article！事实上，我已经使用同一篇文章来构建这个替代示例，它与屏幕宽度无关：

.row, .half-row {
  display: flex;
}

.row {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.half-row {
  width: 320px;
  flex-grow: 1;
  justify-content: space-around;

  /* for seeing better what's going on */
  background-color: #aaa;
  border: 1px solid #333;
}

 <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>

【讨论】：

现在这就像一个魅力！你能解释一下为什么要覆盖半行宽吗？
这实际上是之前尝试不同解决方案的剩余部分，与最终解决方案无关！我编辑了代码以反映这一点。真正的关键是给它你想要打破的width，然后如果它有更多空间，使用flex-grow: 1让它增长
TNX 很多，效果很好，最后一个问题：class "cell" 元素是 flex-box 项，所以最终我可以让它们以不同的方式增长而不影响行/半行布局吗？跨度>
这绝对是可能的。以this codepen 为例。

【解决方案2】：

您可以为此使用 flexbox。查看来自Css-tricks 的关于 Flexbox 的优秀文章

如果您想告诉我们更多关于需要“平均”划分可用空间（水平？垂直？两者？平方？等）的单元类的信息，我将更新我的代码以满足您的需求。

我希望这可以帮助你。

.row {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
}

.half-row {
  display: flex;
  flex-flow: row; /* or column */
  flex-basis: 100%;
  
  /* remove after tests */
  background-color: red;
  height: 500px;
}

.cell {
  flex-basis: 100%;

  /* remove after tests */
  background-color: blue; 
}

@media screen and (min-width: 640px) {
  .half-row { flex-basis: 50%; }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="row">
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
      <div class="half-row">
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
         <div class="cell">
           ..content..
         </div>
      </div>
   </div>
  </body>
</html>

【讨论】：

非常感谢您的回答，具有“cell”类的元素必须水平等分空间。我看到您使用了媒体查询，但 640px 不是屏幕大小，而是具有“行”类大小的容器 div。该容器用于具有不同尺寸的页面的各个部分（它具有“宽度：100％”），我希望如果包含它的元素的尺寸> 640px，则两个“半行”对齐，否则他们将是一个高于另一个