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