31

我需要创建一个水平布局，其中一个块占用所有可用空间，而其他块则缩小以适应其内容。

例如： 

<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/

4

3 回答 3

50

您需要使用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可能有点冗长，但它几乎总是你想要的这种布局。

上下文：我最近在学习在我的应用程序中使用网格时遇到了这个问题。在 ilyaigpetrov 的回答的帮助下，我能够得到一个缩小以适应列大小的工作。他们的回答虽然没有给出太多解释，所以我想我会添加这个：

于 2017-09-26T12:06:14.253 回答
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;
}

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

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

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

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

这个答案帮助我入门。

于 2013-11-07T23:17:49.683 回答
0

我不知道我的代码是否有效，但它可以完成工作：无论是使用网格还是使用 flex。

.container {
  display: grid;
  grid-template-columns: 1fr auto auto;
}
.one {
  background-color: pink;
}
.two {
  background-color: yellow;
}
.three {
  background-color: lightgreen;
}


/* Now the same but with flex. */
.whole-row {
  grid-column: 1 / -1;
}
.flexy {
  display: flex;
  border: 1px solid red;
}
.flexy > .one {
  flex-grow: 1;
}
.flexy > .two,
.flexy > .three {
  /* flex-grow: 0; <- This value is a default. */
}
<div class="container">

  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>

  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>

  <div class="whole-row flexy">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </div>

</div>

于 2017-06-23T17:45:36.690 回答