Flex 不是 Flex any solution → justify-content:space-between 和 full nested item 灵活性不共存

Question

我认为即使我们将 33% 用于嵌套弹性项目和 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>

Flex 不是 Flex any solution → justify-content:space-between 和 full nested item 灵活性不共存

Flex is not that Flex any solution → justify-content:space-between and full nested item flexibility doesn't coexist

css

flexbox

flexboxgrid