css - Flex 不是 Flex 任何解决方案 → justify-content :space-between and full nested item flexibility doesn't coexist

Question

我认为即使我们将 33% 用于嵌套 flex 元素和 67%，例如，但如果其他元素不可用，那么讨论中的元素将占用 100%，但请参见此处 → click here即使删除这部分→

<aside class="main-sidebar col">

主要内容不占满宽度。怎么了？

我尝试了一种补救方案 →

我去掉了

的宽度

.flex-main 并使用了 flex:1 0 68.8%，但这也造成了问题。这破坏了 → .content{justify-content:space-between;}

我相信应该有一些解决方案。有什么建议吗？

背景 → 我选择 flex 的原因是因为这是一个 WordPress 网站。在 WordPress 中经常需要我们可以翻转两列，即主要内容区域和侧边栏，但是当我们像这样使用刚性 CSS 时 →

margin-right: 20px;

翻转变得非常具有挑战性，而且不是那么顺利。

想法是翻转订单，因此翻转列即 order:1 应该更改为 order:2 反之亦然，而此属性 .content {justify-content:space-between;} 始终确保两列之间的间隙。 这一切都有意义吗？

here is the codepen →

现在只要改变顺序，你就会发现翻转顺序是多么容易和顺利，而我们这样做的同时，间隙也因此而保持不变 → .content{justify-content:space-between;}

到目前为止一切都还好吗？合理？我们在同一页上吗？ 现在尝试删除 →

`   <aside class="main-sidebar col">

    </aside>`

flex-main 没有扩展这就是问题所在，我相信他们不会轻易解决这个问题。

VIDEO EXPLANATION [视频中的订单填写打错了，实际上是订单填写。]

Answer 1

if to delete the main-sidebar col, the flex-main doesn't expand, which is the issue, and I am sure their won't be an easy fix for this

有一个非常简单的解决方案。如果你添加 .flex-main:only-child { flex: 1; 到你的 CSS 规则，它会按照你想要的方式工作。

所以基本上这里发生的是，当你删除 main-sidebar 时，:only-child 选择器将启动。

Updated codepen

这里有 2 个片段，具有相同的 CSS，第一个带有 .main-sidebar...

.content {
  display:flex;
  height: 100vh;
  justify-content:space-between;
}

.flex-main {
	width:68.8%;
	order:2;
  background: blue;
}
.flex-main:only-child {
  flex: 1;
}

.main-sidebar {
	/*background: #323232;*/
	background: #ffffff;
	width: 29%;
	color:black;
	order:1;
  background: yellow;

}

<div class="content">
    <div class="flex-main">
        <div class="main col">
        </div>        
    </div>
    <aside class="main-sidebar col">
      
    </aside>
</div>

...第二个没有.main-sidebar

.content {
  display:flex;
  height: 100vh;
  justify-content:space-between;
}

.flex-main {
	width:68.8%;
	order:2;
  background: blue;
}
.flex-main:only-child {
  flex: 1;
}

.main-sidebar {
	/*background: #323232;*/
	background: #ffffff;
	width: 29%;
	color:black;
	order:1;
  background: yellow;

}

<div class="content">
    <div class="flex-main">
        <div class="main col">
        </div>        
    </div>
</div>