CSS网格,其中一列缩小以适合内容,另一列填充重新填充空间

Question

我需要创建一个水平布局,其中一个块占用所有可用空间,而另一个块缩小以适合其内容.

例如:

<div class="grid">
    <div class="expand">Long text label</div>
    <div class="shrink">Button</div>
</div>

一个更复杂的示例,有两行(实际网格):

<div class="grid">
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
</div>

我的要求:

1. 即使很短,大块也应该填满所有可用空间
2. 小块应符合其内容
3. 大块(通常是文本标签)可能是比可用空间大的单个字,因此在这种情况下应该截断
4. 如果是多字,大块不应该换行
5. 小块不应该换行(虽然在多个按钮或图标的情况下,这可以通过为每个组件制作一个块来解决)
6. 支持多行(即列应对齐)

我的目标是Android和iOS智能手机.

我试图调整这个答案的代码,但我无法让它适用于多行.此外,源代码必须是乱序的,这是令人困惑的(虽然我的用例没有阻塞).这是一个jsfiddle:http://jsfiddle.net/k3W8L/

Answer 1

我最近在学习在我的应用程序中使用网格时碰到了这个问题.在ilyaigpetrov的答案的帮助下,我能够得到一个缩小到适合的列大小工作.虽然答案没有给出太多解释,所以我想我会加上这个:

你需要做的是使用grid-template-column和设置要列的大小缩小到合适的auto,并且在至少一种其他列fr单元.

示例:要重新创建侧边栏内容布局,侧边栏可折叠,

-------------------------------
| Sidebar |       Content     |
-------------------------------

您可以将网格创建为:

.grid {
  display: grid;
  ...
  grid-template-columns: auto minmax(0, 1fr); // see note below
  grid-template-areas: "sidebar content";
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}

请参阅此处的codepen以获取演示和代码:https://codepen.io/khs/pen/vegPBL 您可以单击导航栏以查看自动调整大小.

注意:自从写这个答案以来我学到的一件事是,在大多数情况下,特别是在固定高度/固定宽度的布局中,你应该使用minmax(0, 1fr)而不是1fr.原因是这1fr实际上是一个简写minmax(auto, 1fr).当具有较长内容的固定布局时,这会中断.有关更多详细信息,请参阅此问题:为什么minmax(0,1fr)适用于长元素,而1fr不适用？ 因此我更新了我的答案以反映这一事实.在minmax可能有点冗长,但它几乎总是你想要什么,这种布局.

Answer 2

我在尝试创建一个简洁的示例时找到了自己问题的答案。

它利用表格布局：

.grid {
    display: table;
    table-layout: auto;
    width: 100%;
}
.row {
    display: table-row;
}
.expand {
    display: table-cell;
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shrink {
    display: table-cell;
    white-space: nowrap;
}

in使块填充所有可用空间，从而满足前两个要求width: 100%。.expand

请注意，widthin.grid只是设置整个网格的宽度，您可以在此处使用任何值。

由于某种原因，放入max-width: 0可以.expand防止块增长超过可用空间，像这样的小值100px也可以。我偶然发现了这个，但我不知道为什么它有效。

这是 jsfiddle： http: //jsfiddle.net/fr253/

这个答案帮助我开始了。