css - Flex 不是 Flex 的任何解决方案 → justify-content:space-between 和完整的嵌套项目灵活性不共存

Answer 1

如果要删除main-sidebar col，flex-main则不会扩展，这是问题所在，我相信他们不会轻易解决这个问题

有一个非常简单的解决方案。如果您添加.flex-main:only-child { flex: 1; }到您的 CSS 规则中，它将按照您的意愿工作。

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

更新了代码笔

这是 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>