/

如何使 flex 子元素不填充整個高度

如何使 flex 子元素不填充整個高度

我有一個水平的項目列表，當一行文字有 2 行時，會有一些額外的空間，並且其 flex 兄弟元素會延伸到整個高度。

Before

這是原始碼：

1
2
3
4
5
6
7
8
9
<li class="flex">
 <code class="flex-none text-sm whitespace-normal mr-2 mt-0.5 bg-white text-black p-1 ">
 {new Date(post.date).toString().slice(4, 11)}
 </code>{' '}
 <code class="flex-none text-sm whitespace-normal mr-2 bg-black text-white border p-1 ">
 {post.tag}
 </code>
 <a href={'/' + post.url + '/'}>{post.title}</a>
</li>

為了修復這個問題，我在 code 區塊中添加了 self-start 類別，這在 Tailwind CSS 中應用了 CSS align-self: start;。

After

tags: [“CSS”, “flex”, “Tailwind CSS”]