Zenn
☕

bootstrap 5, Flex Utilities

2023/07/01に公開
Bootstrap
CSS
tech

概要

bootstrap 5 で、 Flex　使う例になります。

  • レイアウトは、Grid使う事が多かったのですが、 flexも使えるようです

環境

  • bootstrap 5.3

参考

Fill

  • 適当な幅に埋めてくれる
<div class="d-flex bg-secondary" style="margin-bottom: 4rem;">
	<div class="p-2 flex-fill bg-primary">Flex item</div>
	<div class="p-2 flex-fill">Flex item</div>
	<div class="p-2 flex-fill">Flex item</div>
</div>

Grow

  • 指定部分を、引きのばす

  • 50% 幅、残りの幅

<div class="d-flex">
	<div class="p-2 w-50 bg-secondary">Flex item</div>
	<div class="p-2 flex-grow-1 bg-primary">Flex item</div>
</div>
  • 200px幅、残りの幅
<div class="d-flex">
	<div class="p-2 bg-secondary" style="width: 300px;">Flex item</div>
	<div class="p-2 flex-grow-1 bg-primary">Flex item</div>
</div>

参考のレイアウト

Discussion