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

最新推荐文章于 2024-09-09 23:28:21 发布

cuotangu3718

最新推荐文章于 2024-09-09 23:28:21 发布

阅读量198

点赞数

文章标签： python java css html vue ViewUI

原文链接：https://css-irl.info/a-layout-trick-for-building-a-contact-list/

版权

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

Email address and telephone number links with accompanying icons on the right

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

默认情况下，伸缩或阻止项目占据父级宽度的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 ;
}