flexbox 项目剩余宽度的 100%

Question

我想用flexbox实现如下场景

绿色元素为文本元素，宽度灵活。蓝色元素应占绿色元素旁边剩余宽度的 100%。

我目前的解决方案是这样的：

<div class="container">
  <span class="title">title</span>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

和 css:

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #EAEBEF;

  .title {
    padding: 20px;
    background-color: #48CFAE;
  }

  .fullwidth {
    background-color: #87BDFF;
    flex: 0 0 100%;
    height: 60px;
    margin: 10px 0;
  }
}

但目前看起来是这样的这是一个 codepen example

Answer 1

试试这个 HTML 和 CSS 标记。基本上，您需要将左侧元素保留在一个 div 中，将右侧元素保留在另一个 div.

中

 
   .container {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  background-color: #eaebef;
}
.container .title {
  padding: 20px;
  background-color: #48cfae;
}
.container .div1 {
  width: 20%;
}
.container .div2 {
  width: 80%;
}
.container .fullwidth {
  background-color: #87bdff;
  height: 60px;
  margin: 10px 0;
}

<div class="container">
<div class="div1">
 <span class="title">title</span>
</div>
<div class="div2">
 <div class="fullwidth"></div>
 <div class="fullwidth"></div>
 <div class="fullwidth"></div>
</div>
</div>

Answer 2

见下方代码：
您必须在 div 中扭曲 fullwidth 并将 width 设置为此 div
还将 width 和 margin 设置为 title

.container {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 background-color: #EAEBEF;
} 
 .title {
  width: 20%;
  padding: 20px;
  background-color: #48CFAE;
        margin-left: 15px;

 }
 
 .fullwidth {
  background-color: #87BDFF;
  flex: 0 0 100%;
  height: 60px;
  margin: 10px 0;
 }
 .a{
      margin: 50px;
      width: 50%;
 }

<div class="container">
 <span class="title">title</span>
 <div class="a">
 <div class="fullwidth"></div>
 <div class="fullwidth"></div>
 <div class="fullwidth"></div>
 </div>
</div>

Answer 3

如果你想在不改变你的 html 的情况下实现这一目标，但只改变你的较少，试试这个：

.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background-color: #EAEBEF;
    justify-content: flex-end;
    .title {
          padding: 20px;
          background-color: #48CFAE;
          margin-right: 20px;
          flex-grow: 1
    }
    .fullwidth {
          background-color: #87BDFF;
          height: 60px;
          margin: 10px 0;
          width: 80%;
    }
}

your codepen edited

Answer 4

在不更改 HTML 的情况下，可以使用 CSS-Grid 作为 flexbox 的 替代方案 进行管理。

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 1em;
  background-color: #EAEBEF;
  margin-bottom: 1em;
}

.title {
  padding: 10px;
  grid-row: 2;
  background-color: #48CFAE;
}

.fullwidth {
  grid-column: 2;
  background-color: #87BDFF;
  height: 40px;
}

<div class="container">
  <div class="title">title</div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

<div class="container">
  <div class="title">Longer title</div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
  <div class="fullwidth"></div>
</div>

flexbox 项目剩余宽度的 100%

flexbox item 100% of remaining width

css

width

flexbox