Question

我正在重新设计具有如下结构的网页

.container {
  display:flex;
  flex-wrap: wrap;
  width: 700px;
  background-color: grey;
  justify-content: space-between;
}

.container__txt {
  display: flex;
  width: 100%;
  background-color: green;
}

.container-block {
  display: flex;
  width: calc(50% - 9px);
  background-color: red;
 }

<div class="container">
  <div class="container__txt">I am a text div</div>
  <div class="container-block">I am a block div</div>
  <div class="container-block">I am a block div</div>
 </div>

我试图获得某种行为。我希望当且仅当另一个块不在此处时，这些块才为全宽。

我真的找不到一个好的解决方案，因为该容器还有另一个孩子，即文本div。我无法触摸html结构，也无法添加js；因此解决方案必须是纯CSS。

如果有人对如何实现这一目标有想法，我将不胜感激。

我希望我不会错过问题的一个方面。

Answer 1

在flex: 1上添加.container-block应该可以解决您的问题：

.container {
  display:flex;
  flex-wrap: wrap;
  width: 700px;
  background-color: grey;
  justify-content: space-between;
}

.container__txt {
  display: flex;
  width: 100%;
  background-color: green;
}

.container-block {
  display: flex;
  flex: 1;
  background-color: red;
}

.container-block + .container-block {
  margin-left: 18px;
}

<div class="container">
  <div class="container__txt">I am a text div</div>
  <div class="container-block">I am a block div</div>
  <div class="container-block">I am a block div</div>
</div>

<div class="container">
  <div class="container__txt">I am a text div</div>
  <div class="container-block">I am a block div</div>
</div>

您可以了解有关flex属性here的更多信息。

Answer 2

.container {
  background-color: grey;
}

.container__txt {
   display: flex;
  background-color: green;
}

.container__div {
   display: flex;
  background-color: green;
}

.container-block {
  display: flex;
  flex:1;
  background-color: red;
 }

 <div class="container">
    <div class="container__txt">I am a text div</div>
    <div class="container__div">
      <div class="container-block">I am a block div</div>
      <div class="container-block">I am a block div</div>
    </div>
 </div>
 <br>
 <br>
  <div class="container">
    <div class="container__txt">I am a text div</div>
    <div class="container__div">
      <div class="container-block">I am a block div</div>
    </div>
 </div>

https://jsfiddle.net/Sampath_Madhuranga/t8h671eb/11/

尝试此代码。很好。

CSS-两个flex列

2 个答案: