ꯊꯦꯛ ꯀꯣꯟꯕ ꯌꯥꯕ

ꯐ꯭ꯂꯦꯛꯁ ꯕꯤꯍꯦꯕꯤꯌꯔꯁꯤꯡ ꯏꯅꯦꯕꯜ ꯇꯧꯕꯥ꯫

displayꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ ꯁꯦꯝꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯗꯥꯏꯔꯦꯛꯇ ꯆꯥꯏꯜꯗ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯗꯥ ꯑꯣꯟꯊꯣꯛꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ꯫ ꯐ꯭ꯂꯦꯛꯁ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯠꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯑꯍꯦꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯉꯝꯃꯤ꯫

<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>

<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ .d-flexꯑꯃꯁꯨꯡ .d-inline-flex.

• .d-flex
• .d-inline-flex
• .d-sm-flex
• .d-sm-inline-flex
• .d-md-flex
• .d-md-inline-flex
• .d-lg-flex
• .d-lg-inline-flex
• .d-xl-flex
• .d-xl-inline-flex
• .d-xxl-flex
• .d-xxl-inline-flex

ꯃꯥꯏꯀꯩ

ꯃꯥꯌꯀꯩ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯀꯟꯇꯦꯅꯔ ��ꯃꯗꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯃꯥꯌꯀꯩ ꯑꯗꯨ ꯁꯦꯠ ꯇꯧ꯫ ꯑꯌꯥꯝꯕꯥ ꯀꯦꯁꯁꯤꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯂꯧꯊꯣꯀꯄꯥ ꯌꯥꯏ ꯃꯔꯃꯗꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ ꯑꯁꯤ row. ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯚꯦꯜꯌꯨ ꯑꯁꯤ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯁꯦꯠ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯐꯤꯚꯃꯁꯤꯡ (ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯒꯨꯝꯕꯥ) ꯊꯦꯡꯅꯕꯥ ꯌꯥꯏ꯫

.flex-rowꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯥꯏꯔꯦꯛꯁꯟ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ (ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ) ꯁꯤꯖꯤꯟꯅꯧ , ꯅꯠꯠꯔꯒꯥ .flex-row-reverseꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯗꯥꯏꯔꯦꯛꯁꯟ ꯑꯗꯨ ꯑꯇꯣꯞꯄꯥ ꯃꯥꯌꯀꯩꯗꯒꯤ ꯍꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

.flex-columnꯚꯔꯇꯤꯀꯦꯜ ꯗꯤꯔꯦꯛꯁꯟ ꯑꯃꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ, ꯅꯠꯠꯔꯒꯥ .flex-column-reverseꯚꯔꯇꯤꯀꯦꯜ ꯗꯤꯔꯦꯛꯁꯟ ꯑꯗꯨ ꯑꯇꯣꯞꯄꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯒꯤ ꯍꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ flex-direction.

• .flex-row
• .flex-row-reverse
• .flex-column
• .flex-column-reverse
• .flex-sm-row
• .flex-sm-row-reverse
• .flex-sm-column
• .flex-sm-column-reverse
• .flex-md-row
• .flex-md-row-reverse
• .flex-md-column
• .flex-md-column-reverse
• .flex-lg-row
• .flex-lg-row-reverse
• .flex-lg-column
• .flex-lg-column-reverse
• .flex-xl-row
• .flex-xl-row-reverse
• .flex-xl-column
• .flex-xl-column-reverse
• .flex-xxl-row
• .flex-xxl-row-reverse
• .flex-xxl-column
• .flex-xxl-column-reverse

ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯖꯁ꯭ꯇꯤꯐꯥꯏ ꯇꯧꯕꯥ꯫

justify-contentꯃꯦꯟ ꯑꯦꯛꯁꯤꯁꯇꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ (ꯍꯧꯔꯒꯗꯕꯥ x-ꯑꯦꯛꯁꯤꯁ, ꯋꯥꯏ-ꯑꯦꯛꯁꯤꯁ ꯀꯔꯤꯒꯨꯝꯕꯥ flex-direction: column)꯫ ( ꯕ꯭ꯔꯥꯎꯖꯔ startꯗꯤꯐꯣꯜꯇ), end, center, between, around, ꯅꯠꯠꯔꯒꯥ evenly.

<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>
<div class="d-flex justify-content-evenly">...</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ justify-content.

• .justify-content-start
• .justify-content-end
• .justify-content-center
• .justify-content-between
• .justify-content-around
• .justify-content-evenly
• .justify-content-sm-start
• .justify-content-sm-end
• .justify-content-sm-center
• .justify-content-sm-between
• .justify-content-sm-around
• .justify-content-sm-evenly
• .justify-content-md-start
• .justify-content-md-end
• .justify-content-md-center
• .justify-content-md-between
• .justify-content-md-around
• .justify-content-md-evenly
• .justify-content-lg-start
• .justify-content-lg-end
• .justify-content-lg-center
• .justify-content-lg-between
• .justify-content-lg-around
• .justify-content-lg-evenly
• .justify-content-xl-start
• .justify-content-xl-end
• .justify-content-xl-center
• .justify-content-xl-between
• .justify-content-xl-around
• .justify-content-xl-evenly
• .justify-content-xxl-start
• .justify-content-xxl-end
• .justify-content-xxl-center
• .justify-content-xxl-between
• .justify-content-xxl-around
• .justify-content-xxl-evenly

ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

align-itemsꯀ꯭ꯔꯣꯁ ꯑꯦꯛꯁꯤꯁꯇꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯗꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ (ꯍꯧꯖꯤꯛ ꯍꯧꯒꯗꯕꯥ y-ꯑꯦꯛꯁꯤꯁ, ꯀꯔꯤꯒꯨꯝꯕꯥ x-ꯑꯦꯛꯁꯤꯁ ꯑꯣꯏꯔꯕꯗꯤ flex-direction: column). 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-items.

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch
• .align-items-sm-start
• .align-items-sm-end
• .align-items-sm-center
• .align-items-sm-baseline
• .align-items-sm-stretch
• .align-items-md-start
• .align-items-md-end
• .align-items-md-center
• .align-items-md-baseline
• .align-items-md-stretch
• .align-items-lg-start
• .align-items-lg-end
• .align-items-lg-center
• .align-items-lg-baseline
• .align-items-lg-stretch
• .align-items-xl-start
• .align-items-xl-end
• .align-items-xl-center
• .align-items-xl-baseline
• .align-items-xl-stretch
• .align-items-xxl-start
• .align-items-xxl-end
• .align-items-xxl-center
• .align-items-xxl-baseline
• .align-items-xxl-stretch

ꯁꯦꯜꯐ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

align-selfꯀ꯭ꯔꯣꯁ ꯑꯦꯛꯁꯤꯁꯇꯥ ꯃꯈꯣꯌꯒꯤ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯗꯨ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯑꯣꯏꯅꯥ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯗꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ (ꯍꯧꯖꯤꯛ ꯍꯧꯒꯗꯕꯥ y-ꯑꯦꯛꯁꯤꯁ, ꯀꯔꯤꯒꯨꯝꯕꯥ x-ꯑꯦꯛꯁꯤꯁ ꯑꯣꯏꯔꯕꯗꯤ flex-direction: column). align-items: start, end, center, baseline, ꯅꯠꯠꯔꯒꯥ stretch(ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ) ꯑꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯑꯣꯄꯁꯅꯁꯤꯡꯗꯒꯤ ꯈꯜꯂꯨ꯫

<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ align-self.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch
• .align-self-sm-start
• .align-self-sm-end
• .align-self-sm-center
• .align-self-sm-baseline
• .align-self-sm-stretch
• .align-self-md-start
• .align-self-md-end
• .align-self-md-center
• .align-self-md-baseline
• .align-self-md-stretch
• .align-self-lg-start
• .align-self-lg-end
• .align-self-lg-center
• .align-self-lg-baseline
• .align-self-lg-stretch
• .align-self-xl-start
• .align-self-xl-end
• .align-self-xl-center
• .align-self-xl-baseline
• .align-self-xl-stretch
• .align-self-xxl-start
• .align-self-xxl-end
• .align-self-xxl-center
• .align-self-xxl-baseline
• .align-self-xxl-stretch

ꯊꯜꯍꯟꯕ

.flex-fillꯂꯩꯔꯤꯕꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁ꯭ꯄꯦꯁ ꯄꯨꯝꯅꯃꯛ ꯂꯧꯗꯨꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇꯀꯥ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ (ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯕꯣꯔꯗꯔ-ꯕꯣꯛꯁꯁꯤꯡꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯋꯥꯡꯈꯠꯂꯕꯗꯤ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯗꯥ) ꯐꯣꯔꯁ ꯇꯧꯅꯕꯥ ꯃꯔꯨꯞ-ꯃꯄꯥꯡꯁꯤꯡꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯗꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ flex-fill.

• .flex-fill
• .flex-sm-fill
• .flex-md-fill
• .flex-lg-fill
• .flex-xl-fill
• .flex-xxl-fill

ꯍꯦꯅꯒꯠꯂꯀꯄꯥ ꯑꯃꯁꯨꯡ ꯍꯟꯊꯔꯀꯄꯥ꯫

.flex-grow-*ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯒꯤ ꯂꯩꯔꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯃꯄꯨꯡ ꯐꯥꯍꯟꯅꯕꯥ ꯆꯥꯎꯈꯠꯄꯥ ꯉꯝꯕꯒꯤ ꯃꯑꯣꯡ ꯑꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ, .flex-grow-1ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯃꯈꯣꯌꯅꯥ ꯇꯧꯕꯥ ꯉꯝꯕꯥ ꯂꯩꯔꯤꯕꯥ ꯁ꯭ꯄꯦꯁ ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯩ, ꯑꯗꯨꯒꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯝ ꯑꯅꯤꯗꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯐꯝ ꯑꯗꯨ ꯄꯤꯔꯤ꯫

<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

.flex-shrink-*ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯊꯧ ꯇꯥꯔꯕꯗꯤ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯒꯤ ꯁꯦꯡꯗꯣꯀꯄꯒꯤ ꯇꯧꯕꯥ ꯉꯝꯕꯗꯨ ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ, ꯑꯅꯤꯁꯨꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯝ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ .flex-shrink-1ꯃꯁꯤꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯑꯁꯤ ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯐꯣꯔꯁ ꯇꯧꯏ, .w-100.

<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ flex-growꯑꯃꯁꯨꯡ flex-shrink.

• .flex-{grow|shrink}-0
• .flex-{grow|shrink}-1
• .flex-sm-{grow|shrink}-0
• .flex-sm-{grow|shrink}-1
• .flex-md-{grow|shrink}-0
• .flex-md-{grow|shrink}-1
• .flex-lg-{grow|shrink}-0
• .flex-lg-{grow|shrink}-1
• .flex-xl-{grow|shrink}-0
• .flex-xl-{grow|shrink}-1
• .flex-xxl-{grow|shrink}-0
• .flex-xxl-{grow|shrink}-1

ꯑꯣꯇꯣ ꯃꯥꯔꯖꯤꯟ ꯇꯧꯕꯥ꯫

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯑꯣꯇꯣ ꯃꯥꯔꯖꯤꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇꯁꯤꯡ ꯃꯤꯛꯁ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯌꯥꯝꯅꯥ ꯑꯉꯀꯄꯥ ꯊꯕꯛ ꯈꯔꯥ ꯇꯧꯕꯥ ꯉꯃꯒꯅꯤ꯫ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯁꯤ ꯑꯣꯇꯣ ꯃꯥꯔꯖꯤꯅꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯒꯤ ꯈꯨꯗꯝ ꯑꯍꯨꯝ ꯄꯤꯔꯤ: ꯗꯤꯐꯣꯜꯇ (ꯑꯇꯣ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯇꯕꯥ), ꯑꯥꯏꯇꯦꯝ ꯑꯅꯤ ꯑꯔꯥꯞꯄꯥ ( .me-auto)ꯗꯥ ꯄꯨꯁꯤꯜꯂꯀꯄꯥ, ꯑꯃꯁꯨꯡ ꯑꯥꯏꯇꯦꯝ ꯑꯅꯤ ꯑꯔꯥꯞꯄꯥ ꯃꯐꯃꯗꯥ ꯄꯨꯁꯤꯜꯂꯀꯄꯥ ( .ms-auto).

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="me-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ms-auto p-2 bd-highlight">Flex item</div>
</div>

ꯑꯦꯂꯥꯏꯟ-ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ꯫

ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯃꯊꯛꯇꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯈꯥꯗꯥ align-items, flex-direction: column, ꯑꯃꯁꯨꯡ margin-top: autoꯅꯠꯠꯔꯒꯥ margin-bottom: auto.

<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

ꯌꯣꯝꯕ

ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯐ꯭ꯂꯦꯛꯁ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯗꯥ ꯀꯔꯝꯅꯥ ꯀꯨꯄꯁꯤꯜꯂꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯔꯦꯄꯤꯡ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯕꯥ (ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ) .flex-nowrap, ꯔꯦꯄꯤꯡ .flex-wrap, ꯅꯠꯠꯔꯒꯥ ꯔꯤꯚꯥꯔꯁ ꯔꯦꯄꯤꯡ .flex-wrap-reverse.

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

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

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ flex-wrap.

• .flex-nowrap
• .flex-wrap
• .flex-wrap-reverse
• .flex-sm-nowrap
• .flex-sm-wrap
• .flex-sm-wrap-reverse
• .flex-md-nowrap
• .flex-md-wrap
• .flex-md-wrap-reverse
• .flex-lg-nowrap
• .flex-lg-wrap
• .flex-lg-wrap-reverse
• .flex-xl-nowrap
• .flex-xl-wrap
• .flex-xl-wrap-reverse
• .flex-xxl-nowrap
• .flex-xxl-wrap
• .flex-xxl-wrap-reverse

ꯃꯊꯪ ꯃꯅꯥꯎ

ꯌꯨꯇꯤꯂꯤꯇꯤ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯔꯗꯔ ꯍꯣꯡꯗꯣꯀꯎ꯫ orderꯑꯩꯈꯣꯌꯅꯥ ꯑꯥꯏꯇꯦꯝ ꯑꯃꯥ ꯑꯍꯥꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯑꯔꯣꯏꯕꯥ ꯑꯣꯏꯅꯥ ꯁꯦꯝꯕꯒꯤ ꯑꯣꯄꯁꯟ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯂꯣꯌꯅꯅꯥ ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯣꯔꯗꯔ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯔꯤꯁꯦꯠ ꯑꯃꯥ ꯄꯤꯔꯤ꯫ order0ꯗꯒꯤ 5 ꯐꯥꯎꯕꯒꯤ ꯏꯟꯇꯤꯖꯔ ꯚꯦꯜꯌꯨ ꯑꯃꯍꯦꯛꯇꯕꯨ ꯂꯧꯕꯒꯨꯝꯅꯥ, ꯃꯊꯧ ꯇꯥꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ ꯀꯁ꯭ꯇꯝ CSS ꯍꯥꯄꯆꯤꯜꯂꯨ .

<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ order.

• .order-0
• .order-1
• .order-2
• .order-3
• .order-4
• .order-5
• .order-sm-0
• .order-sm-1
• .order-sm-2
• .order-sm-3
• .order-sm-4
• .order-sm-5
• .order-md-0
• .order-md-1
• .order-md-2
• .order-md-3
• .order-md-4
• .order-md-5
• .order-lg-0
• .order-lg-1
• .order-lg-2
• .order-lg-3
• .order-lg-4
• .order-lg-5
• .order-xl-0
• .order-xl-1
• .order-xl-2
• .order-xl-3
• .order-xl-4
• .order-xl-5
• .order-xxl-0
• .order-xxl-1
• .order-xxl-2
• .order-xxl-3
• .order-xxl-4
• .order-xxl-5

ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ .order-firstꯑꯃꯁꯨꯡ .order-lastꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ ꯃꯗꯨꯗꯤ ꯃꯊꯪꯁꯤꯠꯅꯥ ꯑꯃꯁꯨꯡ , orderꯑꯦꯞꯂꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯏ꯫order: -1order: 6

• .order-first
• .order-last
• .order-sm-first
• .order-sm-last
• .order-md-first
• .order-md-last
• .order-lg-first
• .order-lg-last
• .order-xl-first
• .order-xl-last
• .order-xxl-first
• .order-xxl-last

ꯀꯟꯇꯦꯟꯇ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

ꯀ꯭ꯔꯣꯁ ꯑꯦꯛꯁꯤꯁꯇꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯄꯨꯟꯅꯥalign-content ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯗꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ( ꯕ꯭ꯔꯥꯎꯖꯔ ꯗꯤꯐꯣꯜꯇ), , , , , ꯅꯠꯠꯔꯒꯥ . ꯍꯥꯌꯔꯤꯕꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯎꯠꯅꯕꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡ ꯑꯁꯤ ꯆꯠꯅꯍꯜꯂꯦ ꯑꯃꯁꯨꯡ ꯃꯁꯤꯡ ꯍꯦꯅꯒꯠꯍꯜꯂꯦ꯫startendcenterbetweenaroundstretchflex-wrap: wrap

ꯍꯦꯗꯁ ꯑꯥꯞ ꯇꯧꯕꯥ! ꯃꯁꯤꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯁꯤꯅꯥ ꯐ꯭ꯂꯦꯛꯁ ꯑꯥꯏꯇꯦꯃꯁꯤꯡꯒꯤ ꯔꯣ ꯑꯃꯈꯛꯇꯗꯥ ꯏꯐꯦꯛꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫

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

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

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

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

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

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯚꯦꯔꯤꯑꯦꯁꯅꯁꯤꯡꯁꯨ ꯂꯩꯔꯤ align-content.

• .align-content-start
• .align-content-end
• .align-content-center
• .align-content-around
• .align-content-stretch
• .align-content-sm-start
• .align-content-sm-end
• .align-content-sm-center
• .align-content-sm-around
• .align-content-sm-stretch
• .align-content-md-start
• .align-content-md-end
• .align-content-md-center
• .align-content-md-around
• .align-content-md-stretch
• .align-content-lg-start
• .align-content-lg-end
• .align-content-lg-center
• .align-content-lg-around
• .align-content-lg-stretch
• .align-content-xl-start
• .align-content-xl-end
• .align-content-xl-center
• .align-content-xl-around
• .align-content-xl-stretch
• .align-content-xxl-start
• .align-content-xxl-end
• .align-content-xxl-center
• .align-content-xxl-around
• .align-content-xxl-stretch

ꯃꯤꯗꯤꯌꯥꯒꯤ ꯑꯣꯕꯖꯦꯛꯇ ꯑꯃꯥ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ 4ꯗꯒꯤ ꯃꯦꯗꯤꯌꯥ ꯑꯣꯕꯖꯦꯛꯇ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯗꯨ ꯔꯤꯞꯂꯤꯀꯦꯠ ꯇꯧꯅꯕꯥ ꯌꯦꯡꯂꯤꯕ꯭ꯔꯥ ? ꯍꯥꯟꯅꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯤꯂꯤꯇꯤ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯔꯥꯏꯖꯦꯁꯟ ꯄꯤꯕꯥ ꯉꯝꯕꯥ ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯇꯝ ꯈꯔꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯒꯠꯂꯨ꯫

<div class="d-flex">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯏꯃꯦꯖ ꯑꯗꯨꯒꯤ ꯃꯅꯥꯛꯇꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯄꯥꯝꯃꯤ ꯍꯥꯌꯅꯥ ꯍꯥꯌꯌꯨ:

<div class="d-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  </div>
  <div class="flex-grow-1 ms-3">
    This is some content from a media component. You can replace this with any content and adjust it as needed.
  </div>
</div>

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯗꯥ scss/_utilities.scss. ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ API ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯁꯤꯖꯤꯟꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫

    "flex": (
      responsive: true,
      property: flex,
      values: (fill: 1 1 auto)
    ),
    "flex-direction": (
      responsive: true,
      property: flex-direction,
      class: flex,
      values: row column row-reverse column-reverse
    ),
    "flex-grow": (
      responsive: true,
      property: flex-grow,
      class: flex,
      values: (
        grow-0: 0,
        grow-1: 1,
      )
    ),
    "flex-shrink": (
      responsive: true,
      property: flex-shrink,
      class: flex,
      values: (
        shrink-0: 0,
        shrink-1: 1,
      )
    ),
    "flex-wrap": (
      responsive: true,
      property: flex-wrap,
      class: flex,
      values: wrap nowrap wrap-reverse
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $spacers
    ),
    "justify-content": (
      responsive: true,
      property: justify-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        evenly: space-evenly,
      )
    ),
    "align-items": (
      responsive: true,
      property: align-items,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "align-content": (
      responsive: true,
      property: align-content,
      values: (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around,
        stretch: stretch,
      )
    ),
    "align-self": (
      responsive: true,
      property: align-self,
      values: (
        auto: auto,
        start: flex-start,
        end: flex-end,
        center: center,
        baseline: baseline,
        stretch: stretch,
      )
    ),
    "order": (
      responsive: true,
      property: order,
      values: (
        first: -1,
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        last: 6,
      ),
    ),