在容器中定位 flex box div答案

【问题标题】：Positioning flex box divs within a container在容器中定位 flex box div
【发布时间】：2021-07-10 17:48:14
【问题描述】：

我有这个基于 https://jsfiddle.net/zd2Lpkor/ flex box 的代码，我试图了解如何使用 flexbox 定位元素。

在我的小提琴中，我设置了 1px 的宽度，但代码生成的 div 宽度不是 1px。为什么会这样？

其次，如果我像这样布置我的 div

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

我可以使用 flexbox 将我的 div 定位在下图中的任何标记位置吗？我正在寻找可以让我将 div 或内容放置在我在下图中选择的确切单元格中的弹性框功能。

【问题讨论】：

“我设置了 1px 的宽度，但代码生成的 div 宽度不是 1px。为什么会发生这种情况？” 因为您应用了 flex-grow通过内联样式到每个项目。
@MichaelBenjamin 所以flex-grow 有一个默认的最小宽度？
没有。 flex-grow 根据可用空间和您设置的值，告诉项目消耗行上的可用空间。

标签： html css flexbox

【解决方案1】：

如果您想在布局中的特定单元格中放置特定的 div，您应该考虑使用 CSS Grid 而不是 flexbox：

https://developer.mozilla.org/pl/docs/Web/CSS/grid

这允许您创建单元格布局的定义，并将 div 分配给选定的区域。您可以在 容器元素 中使用 grid-template-areas。您还必须使用display: grid。它可能类似于（x* 是您希望为空的区域，但它们仍然必须在布局中定义）：

grid-template-areas: "1  x  x  x  x  2"
                     "B1 x  x  x  x  B2"
                     "C1 x1 M1 x2 x2 C2";
                     "x3 x3 M2 x2 x2 x4";
                     "L1 x5 x5 x5 x5 L2";
                     "3  x5 x5 x5 x5 4";

然后您可以将 div 分配给其中一个区域：

grid-area: B1;

【讨论】：

【解决方案2】：

Tomasz's 答案是正确的，但如果你想使用弹性盒子，你可以这样做。

.container {
  width: 400px;
}

.row {
  border: 2px solid white;
  color: white;
  display: flex;
  padding: 10px 20px;
  background-color: black;
}

.one,
.two,
.three,
.four,
.five,
.six
{
  justify-content: space-between;
}

.four {
  justify-content: center;
}

<div class="container">
  <div class="row one">
    <h5>1</h5>
    <h5>2</h5>
  </div>

  <div class="row two">
    <h5>b1</h5>
    <h5>b2</h5>
  </div>

  <div class="row three">
    <h5>c1</h5>
    <h5>m1</h5>
    <h5>c2</h5>
  </div>

  <div class="row four">
    <h5>m2</h5>
  </div>

  <div class="row five">
    <h5>l1</h5>
    <h5>l2</h5>
  </div>

  <div class="row six">
    <h5>3</h5>
    <h5>4</h5>
  </div>

</div>

另外如果你想学习 CSS flexbox 我推荐this site

【讨论】：