我需要创建一个水平布局,其中一个块占用所有可用空间,而另一个块缩小以适合其内容.
例如：
<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>
我的要求：
>即使很短,大块也应该填满所有可用空间
>小块应符合其内容
>大块(通常是文本标签)可能是一个比可用空间大的单个字,所以在这种情况下它应该被截断
>如果是多字,大块不应该换行
>小块不应该换行(虽然在多个按钮或图标的情况下,这可以通过为每个组件制作一个块来解决)
>支持多行(即列应对齐)
我的目标是Android和iOS智能手机.
我试图调整this answer的代码,但我不能让它适用于多行.此外,源代码必须是乱序的,这是令人困惑的(虽然我的用例没有阻塞).这是一个jsfiddle：http://jsfiddle.net/k3W8L/
解决方法
我最近在学习在我的应用程序中使用网格时碰到了这个问题.在ilyaigpetrov的答案的帮助下,我得到了一个缩小到适合的列大小来工作.虽然答案没有给出太多解释,所以我想我会添加这个：
您需要做的是使用grid-template-column并将要缩小的列的大小设置为auto,并将fr单元中的至少一个其他列设置为auto.
------------------------------- | Sidebar | Content | -------------------------------
您可以将网格创建为：
.grid {
display: grid;
...
grid-template-column: auto 1fr;
grid-template-areas: "sidebar content";
}
.sidebar {
grid-area: sidebar;
}
.content {
grid-area: content;
}
请参阅此处的codepen以获取演示和放大代码：https://codepen.io/khs/pen/vegPBL您可以单击导航栏以查看自动调整大小.
