ދަމާލުން

ރެސްޕޮންސިވް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސްގެ ފުލް ސޫޓަކާއެކު ގްރިޑް ކޮލަމްތަކާއި، ނެވިގޭޝަންއާއި، ކޮމްޕޯނެންޓްތަކާއި، އަދިވެސް އެތައް ކަމެއްގެ ލޭއައުޓް، އެލައިންމަންޓް، އަދި ސައިޒިންގ އަވަހަށް މެނޭޖްކުރުން. މިއަށްވުރެ ކޮމްޕްލެކްސް އިމްޕްލިމެންޓޭޝަންތަކަށް، ކަސްޓަމް ސީއެސްއެސް ބޭނުންވެދާނެއެވެ.

މި ޞަފްޙާގައެވެ

ފްލެކްސް ބިހޭވިއަރސް އެނެބަލް ކުރުން

displayފްލެކްސްބޮކްސް ކޮންޓެއިނަރެއް އުފެއްދުމަށް ޔުޓިލިޓީސް އެޕްލައިކޮށް ޑައިރެކްޓް ޗިލްޑްރަންސް އެލިމެންޓްތައް ފްލެކްސް އައިޓަމްތަކަށް ބަދަލުކުރުން. ފްލެކްސް ކޮންޓެއިނަރާއި ތަކެތި އިތުރަށް ބަދަލުކުރެވޭނީ އިތުރު ފްލެކްސް ޕްރޮޕަޓީތަކާއެކުގައެވެ.

އަހަންނަކީ ފްލެކްސްބޮކްސް ކޮންޓެއިނަރެއް!

html އެވެ

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

އަހަންނަކީ އިންލައިން ފްލެކްސްބޮކްސް ކޮންޓެއިނަރެކެވެ!

html އެވެ

<div class="d-inline-flex p-2">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އިދިކޮޅު ފަރާތުން ހޮރައިޒޮންޓަލް ޑިރެކްޝަން ފެށުމަށް ބޭނުން ކުރާށެވެ .

ފްލެކްސް އައިޓަމް 1

ފްލެކްސް އައިޓަމް 2

ފްލެކްސް އައިޓަމް 3

ފްލެކްސް އައިޓަމް 1

ފްލެކްސް އައިޓަމް 2

ފްލެކްސް އައިޓަމް 3

html އެވެ

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

.flex-columnވަށައިގެންވާ މިސްރާބެއް ކަނޑައެޅުމަށް، ނުވަތަ .flex-column-reverseއިދިކޮޅު ފަރާތުން ވަށައިގެންވާ މިސްރާބު ފެށުމަށް ބޭނުންކުރާށެވެ .

ފްލެކްސް އައިޓަމް 1

ފްލެކްސް އައިޓަމް 2

ފްލެކްސް އައިޓަމް 3

ފްލެކްސް އައިޓަމް 1

ފްލެކްސް އައިޓަމް 2

ފްލެކްސް އައިޓަމް 3

html އެވެ

<div class="d-flex flex-column mb-3">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">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މައި އެކްސިސްގައި ހުންނަ ފްލެކްސް ތަކެތީގެ އެލައިންމަންޓް ބަދަލުކުރުމަށް ފްލެކްސްބޮކްސް ކޮންޓެއިނަރުތަކުގައި ހުންނަ ޔުޓިލިޓީސް ބޭނުންކުރުން (އެކްސް-އެކްސިސް ފަށަން، y-އެކްސިސް ނަމަ 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(ފެށޭނެ ވައި-އެކްސިސް، 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(ފެށޭނީ ވައި-އެކްސިސް، 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އެމީހުންގެ ކޮންޓެންޓާ އެއްވަރުގެ ފުޅާމިނަކަށް (ނުވަތަ އެމީހުންގެ ކޮންޓެންޓް އެމީހުންގެ ބޯޑަރ-ބޮކްސްތަކަށްވުރެ ފަހަނައަޅައި ނުދާނަމަ އެއްވަރެއްގެ ފުޅާމިނަށް) ފޯސްކޮށް، ލިބެންހުރި ހުރިހާ ހޮރައިޒޮންޓަލް ޖާގައެއް ނަގާށެވެ.

ގިނަ ކޮންޓެންޓެއް އެކުލެވޭ އައިޓަމެއް ފްލެކްސް ކޮށްލާށެވެ

ފްލެކްސް އައިޓަމް

html އެވެ

<div class="d-flex">
  <div class="p-2 flex-fill">Flex item with a lot of content</div>
  <div class="p-2 flex-fill">Flex item</div>
  <div class="p-2 flex-fill">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އެލިމެންޓްތަކުން އެއަށް ލިބޭ ހުރިހާ ޖާގައެއް ބޭނުންކުރާއިރު، ބާކީ ހުރި ދެ ފްލެކްސް އައިޓަމްތަކަށް އެއަށް ބޭނުންވާ ޖާގަ ދިނުމަށް ހުއްދަދެއެވެ.

ފްލެކްސް އައިޓަމް

ތިންވަނަ ފްލެކްސް އައިޓަމެވެ

html އެވެ

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

.flex-shrink-*ފްލެކްސް އައިޓަމެއްގެ ޝްރިންކް ވުމުގެ ގާބިލްކަން ބޭނުން ނަމަ ޓޮގްލް ކުރުމަށް ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ . ތިރީގައިވާ މިސާލުގައި، ދެވަނަ ފްލެކްސް އައިޓަމް ވިތު .flex-shrink-1އަށް މަޖުބޫރު ކުރެވެނީ އޭގެ ކޮންޓެންޓްތައް އާ ލައިނަކަށް އޮޅާލަން، “ކުޑަކޮށް” އާއެކު ކުރީގެ ފްލެކްސް އައިޓަމް އަށް އިތުރު ޖާގަ ދިނުމަށްޓަކައެވެ .w-100.

ފްލެކްސް އައިޓަމް

html އެވެ

<div class="d-flex">
  <div class="p-2 w-100">Flex item</div>
  <div class="p-2 flex-shrink-1">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).

ފްލެކްސް އައިޓަމް

html އެވެ

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

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

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

އެލައިން-އައިޓަމްސް އާއި އެކު

އެއް ފްލެކްސް އެއްޗެއް ކޮންޓެއިނަރެއްގެ މައްޗަށް ނުވަތަ ތިރިއަށް ވަރުގަދައަށް ގެންދާނީ align-items, flex-direction: column, އަދި margin-top: autoނުވަތަ މިކްސްކޮށްގެންނެވެ margin-bottom: auto.

ފްލެކްސް އައިޓަމް

html އެވެ

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

<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="mt-auto p-2">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ޔުޓިލިޓީސް ތަކަކާއެކު. އަޅުގަނޑުމެން ހަމައެކަނި ފޯރުކޮށްދެނީ އެއްޗެއް ފުރަތަމަ ނުވަތަ އެންމެ ފަހުން ހެދުމުގެ އިޚްތިޔާރުތަކުގެ އިތުރުން ޑީއޯއެމް އޯޑަރ ބޭނުން ކުރުމަށް ރީސެޓް ކުރުމެވެ. 0 އިން 5 އަށް އެއްވެސް އިންޓިޖަރ ވެލިއުއެއް ނަގާ ފަދައިން order، ބޭނުންވާ އިތުރު ވެލިއުތަކަށް ކަސްޓަމް ސީއެސްއެސް އިތުރުކުރައްވާށެވެ.

ފުރަތަމަ ފްލެކްސް އައިޓަމެވެ

ދެވަނަ ފްލެކްސް އައިޓަމެވެ

ތިންވަނަ ފްލެކްސް އައިޓަމެވެ

html އެވެ

<div class="d-flex flex-nowrap">
  <div class="order-3 p-2">First flex item</div>
  <div class="order-2 p-2">Second flex item</div>
  <div class="order-1 p-2">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: -1އަދި order: 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ފްލެކްސް ތަކެތި ކްރޮސް އެކްސިސްގައި އެއްކޮށް އެލައިން ކުރެވޭނެއެވެ. start(ބްރައުޒާ ޑިފޯލްޓް)، end, center, between, around, ނުވަތަ އިން ހޮވާށެވެ stretch. މި ޔުޓިލިޓީތައް ދައްކާލުމަށްޓަކައި، އަޅުގަނޑުމެން މިވަނީ flex-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-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

މީޑިއާގެ އެއްޗެއް

ބޫޓްސްޓްރެޕް 4 އިން މީޑިއާ އޮބްޖެކްޓް ކޮމްޕޮނެންޓް ރިޕްލިކޭޓް ކުރަން ބޭނުންވޭތޯ؟ ކުރިއަށްވުރެ މާ ފްލެކްސިބިލިޓީއާއި ކަސްޓަމައިޒޭޝަން ލިބޭ މަދު ފްލެކްސް ޔުޓިލިޓީތަކަކާއެކު ކުޑަ ވަގުތުކޮޅެއްގެ ތެރޭގައި އަލުން އުފައްދާށެވެ.

މިއީ މީޑިއާ ކޮމްޕޮނެންޓެއްގެ ބައެއް ކޮންޓެންޓެވެ. މި އެއްޗެއްގެ ބަދަލުގައި ކޮންމެ ކޮންޓެންޓެއް ވެސް ޖަހައި، ބޭނުންވާ ގޮތަށް އެޖެސްޓް ކުރެވިދާނެ އެވެ.

html އެވެ

<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>

އަދި ތަސްވީރުގެ ކައިރީގައި ކޮންޓެންޓް ވަރުގަދައަށް ސެންޓަރ ކުރަން ބޭނުންވާ ކަމަށް ބުނާށެވެ:

html އެވެ

<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. ޔުޓިލިޓީސް އެޕީއައި ބޭނުންކުރާނެ ގޮތް ދަސްކުރައްވާށެވެ.

    "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
    ),
    "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,
      ),
    ),