പ്രധാന ഉള്ളടക്കത്തിലേക്ക് പോകുക ഡോക്സ് നാവിഗേഷനിലേക്ക് പോകുക
Check
in English

ഫ്ലെക്സ്

റെസ്‌പോൺസീവ് ഫ്ലെക്‌സ്‌ബോക്‌സ് യൂട്ടിലിറ്റികളുടെ പൂർണ്ണ സ്യൂട്ട് ഉപയോഗിച്ച് ഗ്രിഡ് നിരകൾ, നാവിഗേഷൻ, ഘടകങ്ങൾ എന്നിവയും അതിലേറെയും ലേഔട്ട്, വിന്യാസം, വലുപ്പം എന്നിവ വേഗത്തിൽ നിയന്ത്രിക്കുക. കൂടുതൽ സങ്കീർണ്ണമായ നടപ്പാക്കലുകൾക്ക്, ഇഷ്‌ടാനുസൃത CSS ആവശ്യമായി വന്നേക്കാം.

ഫ്ലെക്സ് പെരുമാറ്റങ്ങൾ പ്രവർത്തനക്ഷമമാക്കുക

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(ആരംഭിക്കാനുള്ള x-അക്ഷം, 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(ആരംഭിക്കാനുള്ള 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ലഭ്യമായ എല്ലാ തിരശ്ചീന ഇടവും എടുക്കുമ്പോൾ, അവരുടെ ഉള്ളടക്കത്തിന് തുല്യമായ വീതികളിലേക്ക് (അല്ലെങ്കിൽ അവരുടെ ഉള്ളടക്കം അവരുടെ ബോർഡർ ബോക്‌സുകളെ മറികടക്കുന്നില്ലെങ്കിൽ തുല്യ വീതിയിലേക്ക്) അവരെ നിർബന്ധിക്കാൻ സഹോദര ഘടകങ്ങളുടെ ഒരു ശ്രേണിയിലെ ക്ലാസ് ഉപയോഗിക്കുക .

ധാരാളം ഉള്ളടക്കമുള്ള ഫ്ലെക്സ് ഇനം
ഫ്ലെക്സ് ഇനം
ഫ്ലെക്സ് ഇനം
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

യാന്ത്രിക മാർജിനുകൾ

നിങ്ങൾ സ്വയമേവയുള്ള മാർജിനുകളുമായി ഫ്ലെക്സ് അലൈൻമെന്റുകൾ മിക്സ് ചെയ്യുമ്പോൾ Flexbox-ന് വളരെ ആകർഷണീയമായ ചില കാര്യങ്ങൾ ചെയ്യാൻ കഴിയും. ഓട്ടോ മാർജിനുകളിലൂടെ ഫ്ലെക്സ് ഇനങ്ങൾ നിയന്ത്രിക്കുന്നതിനുള്ള മൂന്ന് ഉദാഹരണങ്ങൾ ചുവടെ കാണിച്ചിരിക്കുന്നു: ഡിഫോൾട്ട് (ഓട്ടോ മാർജിൻ ഇല്ല), രണ്ട് ഇനങ്ങൾ വലത്തേക്ക് തള്ളുക ( .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: automargin-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ഒരു ഇനം ആദ്യമോ അവസാനമോ നിർമ്മിക്കുന്നതിനുള്ള ഓപ്‌ഷനുകളും DOM ഓർഡർ ഉപയോഗിക്കുന്നതിനുള്ള പുനഃസജ്ജീകരണവും മാത്രമേ ഞങ്ങൾ നൽകുന്നുള്ളൂ. 0 മുതൽ 5 വരെയുള്ള orderഏതെങ്കിലും പൂർണ്ണസംഖ്യ മൂല്യം എടുക്കുന്നതുപോലെ, ആവശ്യമായ ഏതെങ്കിലും അധിക മൂല്യങ്ങൾക്കായി ഇഷ്‌ടാനുസൃത CSS ചേർക്കുക.

ആദ്യത്തെ ഫ്ലെക്സ് ഐറ്റം
രണ്ടാമത്തെ ഫ്ലെക്സ് ഇനം
മൂന്നാമത്തെ ഫ്ലെക്സ് ഇനം
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-lastorderorder: -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-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-ൽ നിന്ന് മീഡിയ ഒബ്‌ജക്റ്റ് ഘടകം പകർത്താൻ നോക്കുകയാണോ ? മുമ്പത്തേതിനേക്കാൾ കൂടുതൽ വഴക്കവും ഇഷ്‌ടാനുസൃതമാക്കലും അനുവദിക്കുന്ന കുറച്ച് ഫ്ലെക്‌സ് യൂട്ടിലിറ്റികൾ ഉപയോഗിച്ച് ഇത് സമയബന്ധിതമായി പുനർനിർമ്മിക്കുക.

Placeholder Image
ഇത് ഒരു മീഡിയ ഘടകത്തിൽ നിന്നുള്ള ചില ഉള്ളടക്കമാണ്. നിങ്ങൾക്ക് ഇത് ഏതെങ്കിലും ഉള്ളടക്കം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാനും ആവശ്യാനുസരണം ക്രമീകരിക്കാനും കഴിയും.
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>

ചിത്രത്തിന് അടുത്തുള്ള ഉള്ളടക്കം ലംബമായി കേന്ദ്രീകരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെന്ന് പറയുക:

Placeholder Image
ഇത് ഒരു മീഡിയ ഘടകത്തിൽ നിന്നുള്ള ചില ഉള്ളടക്കമാണ്. നിങ്ങൾക്ക് ഇത് ഏതെങ്കിലും ഉള്ളടക്കം ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കാനും ആവശ്യാനുസരണം ക്രമീകരിക്കാനും കഴിയും.
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>

സാസ്

യൂട്ടിലിറ്റീസ് API

ഫ്ലെക്‌സ്‌ബോക്‌സ് യൂട്ടിലിറ്റികൾ ഞങ്ങളുടെ യൂട്ടിലിറ്റി API-ൽ പ്രഖ്യാപിച്ചു 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
    ),
    "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,
      ),
    ),