![](/img/trans.png)
[英]`flex-basis: auto` sizes parent as if child were `flex-basis: auto`, when child is `flex-basis:10px`
[英]Flex-basis unless no child exists
我使用flex CSS进行以下布局,并且我的左容器设置为宽度为20%。 如果.col.left-col为空(som divs渲染为.my-left-div),我希望它折叠。
如果我将.grid--container .left-col
更改为.grid--container .my-left-div
,则.left-col的宽度不再是20%,而是更多,如果没有JavaScript,是否可以解决?
---------------------------------
| top |
---------------------------------
| | | |
| left | middle | right |
| | | |
| | | |
| | | |
| | | |
| |------------------------
| | bottom |
---------------------------------
的HTML是这样的。
.grid--container { display: flex; width: 100%; justify-content: left; } .grid--container .left-col { flex: 0; flex-basis: 20%; } .grid--container .top { margin-top: 28px; } .grid--container .right-col { flex: 1; padding-left: 20px; } .grid--container .wrapper { display: flex; } .grid--container .wrapper > div { flex: 1; }
<div class="grid--container"> <div class="col left-col"> left </div> <div class="col right-col"> <div class="top"> top </div> <div class="wrapper"> <div class="middle"> middle </div> <div class="right"> right </div> </div> <div class="bottom"> bottom </div> </div> </div>
解决了:
通过使用:empty选择器。
.grid--container { display: flex; width: 100%; justify-content: left; } .grid--container .left-col { flex: 0; flex-basis: 20%; } .grid--container .left-col:empty { flex-basis: 0%; } .grid--container .top { margin-top: 28px; } .grid--container .right-col { flex: 1; padding-left: 20px; } .grid--container .wrapper { display: flex; } .grid--container .wrapper > div { flex: 1; }
<div class="grid--container"> <div class="col left-col"> left </div> <div class="col right-col"> <div class="top"> top </div> <div class="wrapper"> <div class="middle"> middle </div> <div class="right"> right </div> </div> <div class="bottom"> bottom </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.