とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > フレックス

フレックス

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

Sample
Flex 1
Flex 2
Flex 3
Code
<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 はフレックスアイテムを並べる方向を制御します。

Sample
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Code
<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} はフレックスアイテムを均等配置します。

Sample
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Code
<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} はフレックスアイテムの縦方向の配置を指定します。

Sample
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Flex 1
Flex 2
Flex 3
Code
<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} は個々のフレックスアイテムの縦方向の配置を指定します。

Sample
Start
Center
End
Baseline
Stretch
Sample
<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 はフレックスアイテムを横方向一杯に引き延ばします。引き延ばしの割合はコンテンツによって変わります。

Sample
Flex 1 long long long long content.
Flex 2
Flex 3
Code
<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 は引き延ばしません。

Sample
Flex 1
Flex 2
Flex 3
Code
<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 は縮小しません。

Sample
Flex 1
Flex 2
Flex 3
Sample
<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 は左側に最大限のマージンをつけます。

Sample
Flex 1
Flex 2
Flex 3
Sample
<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>

改行

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

Sample
Flex 1
Flex 2
Flex 3
Flex 4
Flex 5
Flex 6
Flex 1
Flex 2
Flex 3
Flex 4
Flex 5
Flex 6
Flex 1
Flex 2
Flex 3
Flex 4
Flex 5
Flex 6
Code
<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 は一番最初、一番最後に配置します。

Sample
Flex 1
Flex 2
Flex 3
Code
<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} は、フローコンテンツの縦方向の配置を指定します。

Sample
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Code
<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>

Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月13日
http://www.tohoho-web.com/bootstrap/card.html