用于建立联系人列表的布局技巧

我最近需要为联系人列表构建一个如下所示的设计：

它由电子邮件地址和电话号码（可能会添加更多联系人类型）组成，每个电子邮件地址和电话号码在右侧都有一个图标，在左侧带有文本。 每个项目都必须是一个链接（包括图标）。 重要的是，项目的宽度应由最长的项目确定。 在上图的情况下，内容最长的项目将是电子邮件地址，因此第二个项目（电话号码）的宽度必须与此相同，即使其内容较短。

默认情况下，伸缩或阻止项目占据父级宽度的100％。 对内容的宽度进行硬编码将不是理想的解决方案，因为内容的长度可能是未知的。

用网格解决

我不太清楚该如何解决这个问题，但是我有一种直觉，即在CSS Grid中使用max-content可能会提供解决方案。 原来我是对的。 如果我们在列表上设置以下CSS属性，则两个项目的大小都将调整为最长项目的宽度：

.contact-list {
  display : grid ;
  grid-template-columns : minmax ( 0 , max-content ) ;
}

使用grid-template-columns属性，这将为网格设置一列，其最小宽度为0，最大宽度为max-content 。 参考max-content 的规范 ，这是：

给定无限可用空间时，框在给定轴上的“理想”大小。 通常，这是盒子可以沿该轴放置的最小尺寸，同时仍可围绕其内容物进行装箱，即，最大程度地减少未填充的空间，同时避免溢出。

minmax()函数中的0值无关紧要–实际上可以是固定值，且该值小于最大内容大小。 如果我们知道我们永远不希望列表项的宽度小于5rem，则可以在此处输入该值。

替代解决方案

我在Twitter上分享了此提示，因为我认为它可能有用。 它得到的响应比我预期的要大得多，因此对于很多人来说，这似乎很方便。 几个人指出，使用inline-block或inline-flex也可以达到相同的结果。 （感谢@htmlvv ， @ripcorddesign和@hack_nug ！）我准备了一个演示，展示了各种可能的解决方案：

当使用inline-block或inline-flex ，浏览器会添加顶部和底部边距，您需要将其设置为0（当然，除非希望如此）。 使用inline-flex您还需要添加flex-direction: column ，因此总体而言，该选项具有最多的代码行：

/* Inline-block */
.contact-list--inline-block {
  display : inline-block ;
  margin : 0 ;
}

/* Inline-flex */
.contact-list--inline-flex {
  display : inline-flex ;
  flex-direction : column ;
  margin : 0 ;
}

利弊

与Grid相比，这两种解决方案均具有更好的浏览器支持优势。 但是，对Grid的支持非常好，因此Internet Explorer才是真正的问题。 在渐进增强的上下文中，这完全可以正常工作，至少在我的用例中：在不支持Grid的浏览器中，每个项目的宽度仅为100％。 不那么优雅，但功能完善。

其他两个解决方案让我感到有些棘手-更少有意，并且没有真正使用设计的属性。 但是我们每天都会使用CSS进行大量修改，所以这绝对不是问题。 网格解决方案是我当时实现的解决方案，因此我将坚持使用它-并且很容易知道它也可以在更大的网格环境中工作。 但请随意选择最适合您的一款！

翻译自: https://css-irl.info/a-layout-trick-for-building-a-contact-list/