とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. フレックス

フレックス

.d-flex, .d-{breakpoint}-flex は子要素をフレックスアイテムとして配置します。.d-inline-flex, .d-{breakpoint}-inline-flex はインライン要素として配置します。

<div class="d-flex">
  <div class="my-box w-25">Flex 1</div>
  <div class="my-box w-25">Flex 2</div>
  <div class="my-box w-25">Flex 3</div>
</div>

方向

.flex-row や .flex-column はフレックスアイテムを並べる方向を制御します。

• .flex-row : 左から右方向
• .flex-{breakpoint}-row : 左から右方向
• .flex-row-reverse : 右から左方向
• .flex-{breakpoint}-row-reverse : 右から左方向
• .flex-column : 上から下方向
• .flex-{breakpoint}-column : 上から下方向
• .flex-column-reverse : 下から上方向
• .flex-{breakpoint}-column-reverse : 下から上方向

<div class="d-flex flex-row">
  ...
</div>

<div class="d-flex flex-row-reverse">
  ...
</div>

<div class="d-flex flex-column">
  ...
</div>

<div class="d-flex flex-column-reverse">
  ...
</div>

均等配置

.justify-content-{start|end|center|between|around} や .justify-content-{breakpoint}-{start|end|center|between|around} はフレックスアイテムを均等配置します。

<div class="d-flex justify-content-start">
  ...
</div>

<div class="d-flex justify-content-end">
  ...
</div>

<div class="d-flex justify-content-center">
  ...
</div>

<div class="d-flex justify-content-between">
  ...
</div>

<div class="d-flex justify-content-around">
  ...
</div>

縦方向の配置

.align-items-{start|end|center|baseline|stretch} や .align-items-{breakpoint}-{start|end|center|baseline|stretch} はフレックスアイテムの縦方向の配置を指定します。

<div class="d-flex align-items-start">
  ...
</div>

<div class="d-flex align-items-end">
  ...
</div>

<div class="d-flex align-items-center">
  ...
</div>

<div class="d-flex align-items-baseline">
  ...
</div>

<div class="d-flex align-items-stretch">
  ...
</div>

.align-self-{start|end|center|baseline|stretch} や .align-self-{breakpoint}-{start|end|center|baseline|stretch} は個々のフレックスアイテムの縦方向の配置を指定します。

<div class="d-flex my-box-light" style="height:6rem;">
  <div class="my-box w-25 align-self-start">Start</div>
  <div class="my-box w-25 align-self-center">Center</div>
  <div class="my-box w-25 align-self-end">End</div>
  <div class="my-box w-25 align-self-baseline">Baseline</div>
  <div class="my-box w-25 align-self-stretch">Stretch</div>
</div>

Fill

.flex-fill や .flex-{breakpoint}-fill はフレックスアイテムを横方向一杯に引き延ばします。引き延ばしの割合はコンテンツによって変わります。

<div class="d-flex">
  <div class="my-box flex-fill">Flex 1</div>
  <div class="my-box flex-fill">Flex 2</div>
  <div class="my-box flex-fill">Flex 3</div>
</div>

伸縮

.flex-grow-1, .flex-{breakpoint}-1 は指定したフレックスアイテムを引き延ばします。.flex-grow-0, .flex-{breakpoint,}-0 は引き延ばしません。

<div class="d-flex">
  <div class="my-box flex-grow-1">Flex 1</div>
  <div class="my-box">Flex 2</div>
  <div class="my-box">Flex 3</div>
</div>

.flex-shrink-0, .flex-{breakpoint}-shrink-1 は指定したフレックスアイテムを縮小します。.flex-shrink-0, .flex-{breakpoint}-shrink-0 は縮小しません。

<div class="d-flex">
  <div class="my-box flex-shrink-1">Flex 1</div>
  <div class="my-box flex-fill">Flex 2</div>
  <div class="my-box flex-fill">Flex 3</div>
</div>

左右のマージン

.mr-auto は右側に、.ml-auto は左側に最大限のマージンをつけます。

<div class="d-flex my-box-light">
  <div class="my-box mr-auto">Flex 1</div>
  <div class="my-box">Flex 2</div>
  <div class="my-box">Flex 3</div>
</div>

改行

下記はフレックスアイテムの改行を制御します。

• .flex-nowrap : 改行しない
• .flex-wrap : 改行する
• .flex-wrap-reverse : 逆方向に改行する
• .flex-{breakpoint}-nowrap : 改行しない
• .flex-{breakpoint}-wrap : 改行する
• .flex-{breakpoint}-wrap-reverse : 逆方向に改行する

<div class="d-flex my-box-light flex-nowrap mb-2">
  ...
</div>

<div class="d-flex my-box-light flex-wrap mb-2">
  ...
</div>

<div class="d-flex my-box-light flex-wrap-reverse">
  ...
</div>

順序

.order-{n} や .order-{breakpoint}-{n} はフレックスアイテムを表示する順序を指定します。n には 1～12 の値を指定できます。.order-first, .order-last は一番最初、一番最後に配置します。

<div class="d-flex my-box-light">
  <div class="my-box order-2 w-25">Flex 1</div>
  <div class="my-box order-3 w-25">Flex 2</div>
  <div class="my-box order-1 w-25">Flex 3</div>
</div>

縦方向の配置

.align-content-{start|center|end|between|around|stretch} は、フローコンテンツの縦方向の配置を指定します。

<div class="d-flex align-content-start flex-wrap my-box-light mb-3" style="height: 6rem;">
  ...
</div>

<div class="d-flex align-content-center flex-wrap my-box-light mb-3" style="height: 6rem;">
  ...
</div>

<div class="d-flex align-content-end flex-wrap my-box-light mb-3" style="height: 6rem;">
  ...
</div>

<div class="d-flex align-content-between flex-wrap my-box-light mb-3" style="height: 6rem;">
  ...
</div>

<div class="d-flex align-content-around flex-wrap my-box-light mb-3" style="height: 6rem;">
  ...
</div>

<div class="d-flex align-content-stretch flex-wrap my-box-light mb-3" style="height: 6rem;">
  ...
</div>

---