flex框使项目本身的宽度达到100%
我有下面的html结构，我试图用一种灵活的方法来安排它，并有一个行灵活的方向。这或多或少就是我的想法
<!-- 100% viewport width -->
<body>
<!-- This toolbar should have whatever width may remain from parent -->
<div class="toolbar-1 width-remain">
<!-- This toolbar should have whatever width may remain from parent -->
<div class="tb1-item1 width-remain">Some content</div>
<!-- This toolbar should have 100% of its content -->
<div class="tb1-item2 width-content">
<!-- This toolbar should have 100% of its content -->
<div class="tb1-item2-inner1 width-content">Some content</div>
<!-- This toolbar should have 100% of its content -->
<div class="tb1-item2-inner2 width-content">Some content</div>
<!-- This toolbar should have 100% of its content -->
<div class="tb1-item2-inner3 width-content">Some content</div>
</div>
<!-- This toolbar should have 100% of its content -->
<div class="tb1-item3 width-content">Some content</div>
</div>
<!-- This toolbar should have 100% of its content -->
<div class="toolbar-2 width-content">
<div class="tb2-item1 width-content">Some content</div>
</div>
</body>我希望有两个工具栏，其中一个可以增长的宽度(第二个，第一个可能占据任何空间是剩下的)。此外，在第一个工具栏中，我有一些额外的项目，我希望能够增长宽度，和一个项目，可以占用任何空间)。
通常，内部项中设置为flex: 1 1 100%;的宽度是其父项的100%，而不是其宽度的宽度。设置flex: 1 1 auto;使项目具有均匀的宽度。还尝试将0放入flex-growth和flex-收缩属性。我尝试过将justify-content: stretch;设置为工具栏父级，将justify-self: stretch设置为可能根据其内容增长但没有成功的内部项。
有人知道我是怎么做到的吗？提前感谢！
回答 1
Stack Overflow用户
发布于 2021-08-20 20:40:27
听起来，对于如何在带有flex的元素中使用带有子元素的display:flex;属性，存在误解。
本质上，你需要告诉.toolbar-1它可以生长，.toolbar-2它可以收缩。要做到这一点，当然可以使用flex属性，如下所示：
.toolbar-1 {
flex: 1 0 auto; /* grow shrink basis */
}
.toolbar-2 {
flex: 0 1 auto;
}另外，您也可以只使用grow和收缩属性：
.toolbar-1 {
flex-grow: 1;
}
.toolbar-2 {
flex-shrink: 1;
}我根据我从问题中了解到的内容，把这个例子拼凑在一起：柔性工具栏
https://stackoverflow.com/questions/68867578
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号