如何使 Flexbox 子项的宽度由其内容决定？

Flexbox 子宽度

带有显示的父容器 div：flex 有一个子 a。如何让子元素显示为“内联”，其宽度由其内容决定？

解决方案

在容器上使用align-items: flex-start 或align-self : 每个上的弹性启动

分析

Flex 容器有一个默认的align-items 设置：stretch，导致子元素沿横轴展开。通过设置align-items: flex-start或align-self: flex-start，可以防止子宽度扩展并实现内联外观。

附加信息

• align-self 适用于单个弹性项目，而align-items 适用于整个容器。
• align-items: flex-start确保与容器开头的横轴对齐。

• 有关 Flex 对齐的更多信息，请参阅：

  • [flex-wrap 是如何工作的？](link1 )
  • [为什么没有“justify-items”和“justify-self”属性？](link2)

以上是如何使 Flexbox 子项的宽度由其内容决定？的详细内容。更多信息请关注PHP中文网其他相关文章！