flex box 使项目本身的宽度为 100%

Question

我有以下 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>

我希望有两个工具栏，其中一个可以增加宽度（第二个和第一个可以占据剩余的空间）。 此外，在第一个工具栏中，我有一些额外的项目，我希望它们的宽度能够增加，还有一个项目可能会占据剩余的空间）。

一般内部item中设置的宽度为flex: 1 1 100%; 采用其父级的 100%，而不是其宽度。 设置flex: 1 1 auto; 使项目具有均匀的宽度。 还尝试将 0 设置为flex-growth和flex-shrink属性。 我试过设置justify-content: stretch; 到工具栏父级，并justify-self: stretch到可能根据其内容增长但没有成功的内部项目。

有谁知道我怎么能做到这一点？ 提前致谢！

Answer 1

听起来好像对如何在带有display:flex;的元素中将flex属性与子元素一起使用存在误解； .

本质上，您需要告诉.toolbar-1可以增长，并且.toolbar-2可以缩小。 为此，您当然可以像这样使用flex属性：

.toolbar-1 {
  flex: 1 0 auto; /* grow shrink basis */
}
.toolbar-2 {
  flex: 0 1 auto;
}

或者你可以只使用 grow 和 shrink 属性：

.toolbar-1 {
  flex-grow: 1;
}

.toolbar-2 {
  flex-shrink: 1;
}

我根据我从问题中理解的内容拼凑了这个例子： Flexible Toolbars

flex box 使项目本身的宽度为 100%

问题描述

1 个解决方案

解决方案1
0 2021-08-20 20:40:27

flex box 使项目本身的宽度为 100%

问题描述

1 个解决方案

解决方案1 0 2021-08-20 20:40:27

解决方案1
0 2021-08-20 20:40:27