如何使用css样式，在一列中使用可用宽度，另一列使用其所需宽度

Question

我需要2列的CSS样式。第一列应使用完整的宽度，第二列旁边应仅使用所需的宽度。我怎样才能做到这一点？有什么办法可以通过display：flex吗？

示例：

“-” =空格

如果显示第二列：无，则第一列应使用宽度100％

[First-Column-------------------------------------------------------]

如果不是

[First-Column------------------------------------------------][HELLO]

[First-Column-------------------------------------------][HELLOHELLO]

Answer 1

您可以使用flexbox进行此操作。只需对第一个孩子使用flex: 1，对第二个孩子使用flex: 0。

.wrapper {
  display: flex;
  flex-flow: row wrap;
  color: white;
}

.child1 {
  flex: 1;
  background: red;
}

.child2 {
  flex: 0;
  background: blue;
}

<div class="wrapper">
  <div class="child child1">
    test
  </div>
  <div class="child child2">
    test
  </div>
</div>

如果隐藏第二个孩子，结果将如下所示：

.wrapper {
  display: flex;
  flex-flow: row wrap;
  color: white;
}

.child1 {
  flex: 1;
  background: red;
}

.child2 {
  flex: 0;
  background: blue;
  display: none;
}

<div class="wrapper">
  <div class="child child1">
    test
  </div>
  <div class="child child2">
    test
  </div>
</div>

---

如果您只需要内容宽度的项目，则可以使用以下方法：

.wrapper {
  display: flex;
  flex-flow: row wrap;
  color: white;
  justify-content: space-between;
}

.child1 {
  background: red;
}

.child2 {
  background: blue;
}

<div class="wrapper">
  <div class="child child1">
    test
  </div>
  <div class="child child2">
    test
  </div>
</div>

Answer 2

您可以使用以下代码执行此操作：

.mainDiv, .mainDiv div{
  display: block;
}
.mainDiv .firstDiv{
  float: left;
  width: 200px;
}
.mainDiv .secondDiv{
  float: left;
  width: calc(100% - 200px);
}

<div class="mainDiv">
  <div class="firstDiv"> First Div </div>
  <div class="secondDiv"> Second Div </div>
</div>

Answer 3

.main{
  display:flex;
}

<div class="main">
  <div>[First-Column------------------------------------------------]</div>
  <div> [HELLO]</div>
</div>