强制弹性项目跨越整个行宽
我试图将前两个子元素保留在同一行上，而第三个元素以全宽度保留在自己的下面，所有这些都使用flex。
我对在前两个元素上使用flex-grow和flex- shrink属性特别感兴趣（这是我不使用百分比的原因之一），但是第三个元素确实必须为全角且在前两个元素以下。
当发生错误且无法更改代码时，以label编程方式将元素添加到text元素之后。
如何强制label元素在使用flex定位的其他两个元素下方跨越100％的宽度？
.parent {
display: flex;
align-items: center;
width: 100%;
background-color: #ececec;
}
.parent * {
width: 100%;
}
.parent #text {
min-width: 75px;
flex-shrink: 2.25;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>
问题答案：
每当您希望弹性项目占据整个行时，请将其设置为width: 100%/ flex-basis: 100%，然后wrap在容器上启用它。
现在，该物品会消耗所有可用空间。兄弟姐妹被迫移至其他行。
.parent {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: #ececec;
}
.error {
flex: 0 0 100%; /* fg: 0, fs: 0, fb: 100% */
border: 1px dashed red;
}
#range, #text {
flex: 1;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>
-
我知道我可以用跨越两列： 但是我怎样才能使第一个项目也跨越2行呢？ 我曾尝试通过将其他项目的高度增加一倍来设置第一个项目的高度，但这导致与第一个项目相同行的每个项目也被拉伸到该高度：
-
问题内容： 使用flex容器和容器，您可以使用将对齐的内容与中心对齐。 有没有一种方法可以使用CSS网格实现使网格项溢出的相同行为？ 我创建了一支笔，显示了所需的弯曲行为 问题答案： Flex和Grid是不同的动物，因此在flex中简单的行为可能无法很好地转换为grid。 伸缩项可以跨容器居中，因为伸缩布局可与伸缩线一起使用。伸缩线是行或列。 当要求伸缩项目在行/列中居中时，它可以从头到尾访问整行
-
问题内容： 我有两个同级元素，每个元素都包含动态内容。 在某些情况下，然后会有更多的内容，反之亦然。我希望第二个元素的高度始终等于第一个元素的高度。如果的高度更大，则其高度将溢出div，因此可以滚动。 有什么方法可以通过Flexbox做到这一点？ 问题答案： 是的，有可能。让兄弟姐妹单独设置最大高度，并设置其他人的和，然后根据规范将其扩展到他们兄弟姐妹的高度。没有绝对定位。没有设置任何元素的高度。
-
问题内容： 我想展示水平系列的未知数量的纸牌。为此，如果太多，它们将必须重叠。我很难说服伸缩盒在不缩小卡片的情况下重叠卡片。下面的示例缩小卡片。我尝试过，但后来没有受到尊重。 问题答案： 这就是我使用flexbox做到的方式。 请注意，从技术上讲，卡并不是重叠的，它们只是被剪裁了。但是它们 看起来 像是重叠的。诀窍是将每张卡包裹在另一个带有溢出的元素中：隐藏。 包装元素将缩小以适应可用空间，并且在
-
我可以看到，我可以使用以下代码以编程方式将状态设置为强制打开：CircuitBreaker强制打开状态 但是有没有一种方法可以设置一个属性，在应用程序启动时立即将状态设置为此，以便可以与测试一起使用呢？
-
问题内容： 我正在尝试使列范围可用。具体来说，我正在寻找一个嵌套在另一个内部的方法，当用户单击以查看嵌套表时，它应该展开以向下推动下面的行并填充空白处。这类似于您在MS Access中可以嵌套表的情况，单击行上的“展开”按钮将向您显示嵌套表中的相应条目。 如果有人知道使用进行列跨度的方法，您能指出我正确的方向吗？或者，如果您知道执行此操作的其他方法，则欢迎您提出建议。该应用程序是使用Swing构建