💬

【Tailwind】横並びの固定幅+可変幅の要素を実現する【Flex】

2022/11/25に公開約300字

背景

Webサービスのレイアウト実装にて、横並びにした固定幅のコンテンツが、可変なコンテンツに押しつぶされてレイアウトが崩れてしまう現象があった。

対策

横並びにする際にコンテンツをラップしているdiv等でflexを指定し、中の固定幅のコンテンツにはflex-none、可変幅のコンテンツにはgrowをcssで記入する。

コード

<div className="w-screen flex">
  <div className="flex-none w-[16rem]" />
  <div className="grow" />
</div>

参考サイト

Tailwind公式ドキュメント

Discussion

ログインするとコメントできます