为什么这些弹性物品没有包装？
我有一个flex项目，它也是一个flex容器.sub-con，问题是.sub-con即使添加了，它的flex项目也拒绝包装flex-flow: row wrap。
谁能为我解决这个问题，或指出我做错了什么。
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 100vh;
}
.sub-con {
margin-right: 50px;
margin-left: 50px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col-one {
height: 100px;
border: 1px solid lightgreen;
flex-grow: 2;
}
.col-two {
height: 100px;
border: 1px solid red;
flex-grow: 1;
}
<div class="container">
<div class="sub-con">
<div class="col-one"></div>
<div class="col-two"></div>
</div>
</div>
问题答案：
嵌套容器中的伸缩项目按 百分比 调整大小。
.col-one{
width: 40%;
height: 100px;
border: 1px solid lightgreen;
}
.col-two{
width: 40%;
height: 100px;
border: 1px solid red;
}
由于百分比长度基于父级的长度，因此 没有理由进行包装 。它们将始终是父级的40％，即使父级的宽度为1％。
如果您使用其他长度单位，例如px或em，它们将自动换行。
.container {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 100vh;
}
.sub-con {
flex: 1; /* for demo only */
align-content: flex-start; /* for demo only */
margin-right: 50px;
margin-left: 50px;
height: 500px;
background-color: #fff;
display: flex;
justify-content: center;
flex-flow: row wrap;
}
.col-one {
width: 200px;
height: 100px;
border: 1px solid lightgreen;
}
.col-two {
width: 200px;
height: 100px;
border: 1px solid red;
}
<div class="container">
<div class="sub-con">
<div class="col-one"></div>
<div class="col-two"></div>
</div>
</div>
-
问题内容： 我正在尝试制作多个具有相同高度的正方形行（每行3个）。 我为此编写了一些HTML和CSS，但所有框都在同一行上。 这是我到目前为止的内容： 当我用此页面加载页面时，所有框都出现了，但它们都在一行上，超过了父div的100％宽度。 任何帮助深表感谢。 问题答案： flex容器的初始设置为 。 这意味着，当您创建一个伸缩容器（通过应用元素或将其应用于元素）时，所有子元素（“伸缩项”）都限于
-
问题内容： 我有一个伸缩框（请参见下面的示例片段）。 我想进行设置，以便在所有情况下，都位于 弹性框 的中心，其他跨度将根据其标记在其周围流动。 我基本上是在寻找CSS代码，但在寻找主轴，而不是在交叉轴这可能有助于解释我的要求）。 我也正在申请我的，这是我在阅读本文后了解到的（很棒的页面，但仍然让我提出以下问题-除非我不完全理解所有问题）。 这是我得到的代码： 为了充分重申我的问题：我想知道如何中
-
问题内容： 我正在尝试制作多个具有相同高度的正方形行（每行3个）。 我为此编写了一些HTML和CSS，但所有框都在同一行上。 这是我到目前为止的内容： 当我用此页面加载页面时，所有框都出现了，但是它们都在一行上，超过了父div的100％宽度。 任何帮助深表感谢。 问题答案： flex容器的初始设置为 。 这意味着，当您创建一个伸缩容器（通过应用元素或将其应用于元素）时，所有子元素（“伸缩项”）都限
-
我是否遗漏了包装类中的某些细节？ 我有以下程序，在其中我定义了一个类，它包装并提供运算符： 我以为这会编译成同样的东西--它在做同样的计算，所有的东西都是内联的。 编辑-如果我使用而不是，它将产生相同的输出。 编辑-我发布了错误的ASM版本(而不是)，因此本节没有帮助。 我在我的Mac电脑上使用Xcode的gcc，在一个64位系统上。除了for-loop的主体之外，结果是相同的。
-
问题内容： 样品： 我有两个问题，请： 为什么基本上会发生这种情况？ 什么是正确的方法，以防止其拉伸而不影响flex容器中的其他flex项目？ 问题答案： 您不想拉伸高度跨度吗？ 您可能会影响一个或多个弹性项目，而不会拉伸容器的整个高度。 要影响容器的所有弹性项目，请选择以下选项： 您必须设置为，并且该容器的所有弹性项目都将获得其内容的高度。 要仅影响单个flex-item，请选择以下选项： 如果
-
我的数据库代码是这样的。 出现成功保存的消息，但在数据库中找不到该值。请告诉我为什么会这样？