如何讓 Flex 專案的寬度由內容決定，而不是由父容器決定？

如何讓 Flex 項目佔用內容寬度而不是父級寬度

Flexbox 提供了一種便捷的方式來排列元素。但是，預設情況下，彈性項目會延伸到其父容器的寬度。這種行為可能並不總是令人滿意。

問題：

您有一個帶有子錨點 () 元素的 Flex 容器。如何使子項顯示為“內聯”，其寬度由其內容決定，而不是擴展到父項的完整寬度？

失敗的嘗試：

設定inline-flex的子級的顯示屬性不

解：

使用以下策略：

1.在容器上使用align-items : flex-start：

這將所有Flex項目垂直對齊到頂部。它會覆蓋預設的「拉伸」對齊方式，防止專案擴展到整個父寬度。

2.在Flex專案上使用align-self: flex-start：

這將特定的Flex項目的對齊方式設置為頂部，獨立於其他Flex項目控制自己的對齊方式items.

範例：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

a {
  padding: 10px 40px;
  background: pink;
}

說明：

透過使用align-items：flex-start或align -self：flex-start，您有效地表示相關的彈性項目應沿橫軸與容器的頂部對齊（垂直）並且不應擴展到整個父級寬度。這允許項目的寬度由其內容決定，從而實現所需的“內聯”效果。

以上是如何讓 Flex 專案的寬度由內容決定，而不是由父容器決定？的詳細內容。更多資訊請關注PHP中文網其他相關文章！