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

如果要删除main-sidebar col，flex-main则不会扩展，这是问题，我相信他们不会是一个简单的解决方案为此

有一个非常简单的解决方案。如果您将.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的任何解决方案→证明内容：空间和完全嵌套项目的灵活性不会共存

1 个答案: