14 内联弹性布局（Inline Flex）

社交媒体图标 示例 14a

本示例受艾哈迈德·沙迪德（Ahmad Shadeed）文章的启发。假设你想要一排圆形图标，每个图标都精确地位于圆形正中心，就像这样。

为了将每个图标都置于圆形中心，我们可以给圆形添加弹性布局（flex），并使用justify - center和items - center属性来实现居中。但这样会使圆形图标一个堆叠在另一个下方，而不是并排排列。

Try it out

标记代码（Markup）

<a class="icon flex justify-center items-center" href="#">
  <i class="fa fa-twitter"></i>
</a>
<a class="icon flex justify-center items-center" href="#">
  <i class="fa fa-linkedin"></i>
</a>
<a class="icon flex justify-center items-center" href="#">
  <i class="fa fa-github"></i>
</a>

解决方案

现在只需将flex改为inline-flex。

<a class="icon inline-flex justify-center items-center" href="#"> </a>
<a class="icon inline-flex justify-center items-center" href="#"> </a>
<a class="icon inline-flex justify-center items-center" href="#"> </a>

Working Demo

理解内联弹性盒（Inline Flex） 概念

到目前为止我们看到的所有实用类，无论是应用在弹性容器上还是弹性项目上，都会以这样或那样的方式影响弹性项目，比如改变它们的尺寸、在容器内的位置或对齐方式。但是inline-flex实用类并不会影响弹性项目。它使弹性容器本身表现得像一个内联元素，而不是块级元素。

Tailwind 类	CSS 属性及值	解释
inline-flex	display: inline-flex;	使弹性容器本身表现得像一个内联元素

这就是在前面的示例中，当每个图标本身都是一个弹性容器时，我们让图标（内联地）并排显示的方法。