什么'；这是使用HTML/CSS实现此布局的最佳方法；Flexbox、Grid还是其他？

.phone{
显示器：flex；
柔性流动：柱；
柔性包装：包装；
}
.phone>span{
显示：内联块；
柔性生长：1；
弹性收缩：0；
弹性基准：50%；
}
.phone>span.icon{
flex-grow:0；
弹性收缩：1；
弹性基准：100%；
}

电话
555-555-5555

显示

充满了选项，不仅是

flex

或

网格

：

这里还有一个：

/*基本布局*/
.电话{
显示：表格；
/*或内联表*/
}
.图标{
显示：表格单元格；
}
跨度{
显示：块；
}
/*化妆*/
.电话{
背景：#333；
颜色：#eee；
过渡：0.2s；
}
.图标{
垂直对齐：中间对齐；
宽度：50%；
文本对齐：居中；
右边框：实心1px灰色；
}
跨度{
填充：0.5em
}
跨度：第n个孩子（2）{
背景:#555；
}
a~a.图标{宽度：25%；
}
.icon~.icon{左边框：1px纯色灰色；}
/*使用鼠标悬停测试布局行为的演示*/
.电话：悬停{
字体大小：40px；
宽度：100%；
}

电话
555-555-5555

您可以添加另一个跨越单元
电话
555-555-5555

显示

充满了选项，不仅是

flex

或

网格

：

这里还有一个：

/*基本布局*/
.电话{
显示：表格；
/*或内联表*/
}
.图标{
显示：表格单元格；
}
跨度{
显示：块；
}
/*化妆*/
.电话{
背景：#333；
颜色：#eee；
过渡：0.2s；
}
.图标{
垂直对齐：中间对齐；
宽度：50%；
文本对齐：居中；
右边框：实心1px灰色；
}
跨度{
填充：0.5em
}
跨度：第n个孩子（2）{
背景:#555；
}
a~a.图标{宽度：25%；
}
.icon~.icon{左边框：1px纯色灰色；}
/*使用鼠标悬停测试布局行为的演示*/
.电话：悬停{
字体大小：40px；
宽度：100%；
}

电话
555-555-5555

您可以添加另一个跨越单元
电话
555-555-5555

这里是我的首选css网格

.phone{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（2100px）；
}
.电话.图标{
背景：aliceblue；
网格行：1/3；
}
.电话跨度{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

偶像
电话
555-555-5555

这里是我的首选css网格

.phone{
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（2100px）；
}
.电话.图标{
背景：aliceblue；
网格行：1/3；
}
.电话跨度{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

偶像
电话
555-555-5555

谢谢，效果很好。你怎么知道表格单元格会移到左边？代码中没有任何内容告诉我，当我将其设置为“表格单元格”时，它肯定会向左对齐。@BlakeBell这是表格布局的常规行为，我实际上故意打破了它，将“设置下一个跨距”发送到nex列，但将其作为常规块，以便它们正常堆积。它们填满了虚拟单元，因为它意味着是另一个单元，而不是块元素。显示：表格/表格单元（&系列）自1998年起就不符合CSS2的规范你也可以坐进一张桌子谢谢，很好用。你怎么知道表格单元格会移到左边？代码中没有任何内容告诉我，当我将其设置为“表格单元格”时，它肯定会向左对齐。@BlakeBell这是表格布局的常规行为，我实际上故意打破了它，将“设置下一个跨距”发送到nex列，但将其作为常规块，以便它们正常堆积。它们填满了虚拟单元，因为它意味着是另一个单元，而不是块元素。显示：表格/表格单元（&系列）自1998年起就不符合CSS2的规范你也可以闯入一张桌子