如何为可隐藏的柔性面板制作条件边距？

Question

我有初步的html：

body {
  background-color: grey;
}
.container{
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
}
.panel{
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left{
  background-color: green;
}
.left{
  margin-right: 8px;
}
.right{
  background-color: blue;
}
.hidden{
  display: none;
}

<div class="container">
  <div class="left panel ">left</div>
  <div class="right panel ">right</div>
</div>

它制作两个宽度相等的面板，它们之间有8px的边距。 Fiddle

看起来：

然后我需要隐藏右侧或左侧或两个隐藏类的面板。

我有新的html（fiddle）：

<div class="container">
    <div class="left panel ">left</div>
    <div class="right panel hidden">right</div>
</div>

结果：

如果有一个面板，如何删除保证金，如果有两个面板，则显示保证金？ 我不能只从左到右移动边距，因为我需要可以独立隐藏两个面板。

UPD 1。我无法从dom中移除面板。它应该使用隐藏类。

Answer 1

尝试使用+选择器。通过使用此选择器，仅在.right div

之后立即放置.left div时添加了边距

.left + .right{
   margin-left:8px;
}

body {
  background-color: grey;
}
.container{
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
  margin-bottom:20px;
}
.panel{
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left{
  background-color: green;
}

.left + .right{
  margin-left:8px;
}
.right{
  background-color: blue;
}
.hidden{
  display: none;
}

<div class="container">
  <div class="left panel">left</div>
  <div class="right panel">right</div>
</div>

<div class="container">
  <div class="left panel">left</div>
</div>

Answer 2

你可以在没有从DOM中删除panel的情况下执行：

1. 而不是margin-right面板上的left，而是使用margin-left面板上的right。

2. 当left或right中的任何一个具有班级hidden时，使用以下样式删除边距：

   .container > .left.hidden + .right{
     margin-left:0;
   }
   

见下面的演示：

body {
  background-color: grey;
}
.container {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
}
.panel {
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left {
  background-color: green;
}
.right {
  background-color: blue;
  margin-left: 8px;
}
.hidden {
  display: none;
}
.container > .left.hidden + .right{
  margin-left:0;
}

<div class="container">
  <div class="left panel">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel">left</div>
  <div class="right panel hidden">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel hidden">right</div>
</div>

Answer 3

这是我自己的版本怎么做。 优点：没有额外的保证金启用/禁用。保证金仅在必要时应用。 缺点：我担心它不是很灵活。

body {
  background-color: grey;
}
.container {
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
}
.panel {
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left {
  background-color: green;
}
.right {
  background-color: blue;
}
.hidden {
  display: none;
}

.container .left:not(.hidden) + .right:not(.hidden){
  margin-left: 8px;
}

<div class="container">
  <div class="left panel">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel">left</div>
  <div class="right panel hidden">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel">right</div>
</div>
<br/>
<div class="container">
  <div class="left panel hidden">left</div>
  <div class="right panel hidden">right</div>
</div>

Answer 4

您也可以使用~选择器。

.container > div ~ div {
    margin-left: 8px;
}
.container > .hidden + .right {
    margin-left: 0;
}

如果.container中有2个或3个以上的项目，您可以添加一些空格。

body {
  background-color: grey;
}
.container{
  display: flex;
  width: 200px;
  height: 100px;
  background-color: red;
  margin-bottom: 20px;
}
.panel{
  height: 100%;
  flex-grow: 1;
  flex-basis: 50%;
  color: white;
}
.left{
  background-color: green;
}
.right{
  background-color: blue;
}
.hidden{
  display: none;
}
.container > div ~ div {
  margin-left: 8px;
}
.container > .hidden + .right {
    margin-left: 0;
}

<div class="container">
    <div class="left panel ">left</div>
</div>
<div class="container">
    <div class="left panel ">left</div>
    <div class="right panel">right</div>
</div>
<div class="container">
    <div class="left panel ">left</div>
    <div class="right panel">right</div>
    <div class="right panel">right</div>
</div>