首页 文章

使flex项目在一行上占据整个宽度

提问于
浏览 次
11

我试图在同一行保留前两个子元素，而第三个元素在全宽度下面保持自己，同时使用flex .

我特别感兴趣的是在前2个元素上使用 flex-grow 和 flex-shrink 属性（这是我不使用百分比的原因之一）但是第三个元素必须是全宽并且低于前两个元素 .

当 text 元素更改代码时， label 元素将在 text 元素之后以编程方式添加 .

如何强制标签元素在使用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>
html css css3 flexbox

2 回答

  • 3

    您似乎正在寻找子项上的 min-width 和父项上的 flex-wrap:wrap ：

    .parent {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.parent > * {
  flex-grow: 1;
}

.parent > .error {
  min-width: 100%;
  background-color: rgba(255,0,0,.3);
}

    <div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>
    回复于
  • 21

    每当您希望弹性项占据整行时，将其设置为 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>
    回复于

相关问题