Source

ફ્લેક્સ

રિસ્પોન્સિવ ફ્લેક્સબોક્સ ઉપયોગિતાઓના સંપૂર્ણ સ્યુટ સાથે ગ્રીડ કૉલમ, નેવિગેશન, ઘટકો અને વધુના લેઆઉટ, સંરેખણ અને કદને ઝડપથી મેનેજ કરો. વધુ જટિલ અમલીકરણો માટે, કસ્ટમ 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

દિશા

દિશા ઉપયોગિતાઓ સાથે ફ્લેક્સ કન્ટેનરમાં ફ્લેક્સ વસ્તુઓની દિશા સેટ કરો. મોટા ભાગના કિસ્સાઓમાં તમે બ્રાઉઝર ડિફોલ્ટ હોવાથી અહીં આડા વર્ગને છોડી શકો છો row. જો કે, તમે એવી પરિસ્થિતિઓનો સામનો કરી શકો છો જ્યાં તમારે આ મૂલ્યને સ્પષ્ટપણે સેટ કરવાની જરૂર હોય (જેમ કે પ્રતિભાવ લેઆઉટ).

.flex-rowઆડી દિશા (બ્રાઉઝર ડિફૉલ્ટ) સેટ કરવા અથવા .flex-row-reverseવિરુદ્ધ બાજુથી આડી દિશા શરૂ કરવા માટે ઉપયોગ કરો .

ફ્લેક્સ આઇટમ 1
ફ્લેક્સ આઇટમ 2
ફ્લેક્સ આઇટમ 3
ફ્લેક્સ આઇટમ 1
ફ્લેક્સ આઇટમ 2
ફ્લેક્સ આઇટમ 3
<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વિરુદ્ધ બાજુથી ઊભી દિશા શરૂ કરવા માટે ઉપયોગ કરો.

ફ્લેક્સ આઇટમ 1
ફ્લેક્સ આઇટમ 2
ફ્લેક્સ આઇટમ 3
ફ્લેક્સ આઇટમ 1
ફ્લેક્સ આઇટમ 2
ફ્લેક્સ આઇટમ 3
<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

સામગ્રીને ન્યાય આપો

justify-contentમુખ્ય અક્ષ પર ફ્લેક્સ વસ્તુઓની ગોઠવણી બદલવા માટે ફ્લેક્સબોક્સ કન્ટેનર પર ઉપયોગિતાઓનો ઉપયોગ કરો (પ્રારંભ કરવા માટે x-અક્ષ, y-અક્ષ જો flex-direction: column). start(બ્રાઉઝર ડિફૉલ્ટ), end, center, between, અથવા માંથી પસંદ કરો around.

ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
<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>

રિસ્પોન્સિવ ભિન્નતા માટે પણ અસ્તિત્વમાં છે justify-content.

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

વસ્તુઓ સંરેખિત કરો

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

ભરો

.flex-fillતમામ ઉપલબ્ધ આડી જગ્યા લેતી વખતે તેમને સમાન પહોળાઈમાં દબાણ કરવા માટે ભાઈ-બહેન તત્વોની શ્રેણી પર વર્ગનો ઉપયોગ કરો . ખાસ કરીને સમાન-પહોળાઈ, અથવા ન્યાયી, નેવિગેશન માટે ઉપયોગી.

ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</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-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

ઓટો માર્જિન

જ્યારે તમે સ્વતઃ માર્જિન સાથે ફ્લેક્સ સંરેખણને મિશ્રિત કરો છો ત્યારે ફ્લેક્સબોક્સ કેટલીક અદ્ભુત વસ્તુઓ કરી શકે છે. ઓટો માર્જિન દ્વારા ફ્લેક્સ આઇટમ્સને નિયંત્રિત કરવાના ત્રણ ઉદાહરણો નીચે બતાવ્યા છે: ડિફોલ્ટ (કોઈ ઓટો માર્જિન નથી), બે આઇટમ્સને જમણી તરફ ધકેલવી ( .mr-auto), અને બે આઇટમ્સને ડાબી તરફ ધકેલવી ( .ml-auto).

કમનસીબે, IE10 અને IE11 ફ્લેક્સ આઇટમ્સ પર સ્વતઃ માર્જિનને યોગ્ય રીતે સમર્થન આપતા નથી કે જેમની પેરેન્ટ પાસે બિન-ડિફોલ્ટ justify-contentમૂલ્ય છે. વધુ વિગતો માટે આ સ્ટેકઓવરફ્લો જવાબ જુઓ .

ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
ફ્લેક્સ આઇટમ
<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="mr-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="ml-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

ઓર્ડર

મુઠ્ઠીભર ઉપયોગિતાઓ સાથે ચોક્કસ ફ્લેક્સ વસ્તુઓનો વિઝ્યુઅલ ક્રમ બદલો . orderઅમે ફક્ત આઇટમને પ્રથમ અથવા છેલ્લી બનાવવા માટેના વિકલ્પો પ્રદાન કરીએ છીએ, તેમજ DOM ઓર્ડરનો ઉપયોગ કરવા માટે રીસેટ કરીએ છીએ. orderકોઈપણ પૂર્ણાંક મૂલ્ય (દા.ત.,) લે છે તેમ , 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-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

સામગ્રી સંરેખિત કરો

ફ્લેક્સ આઇટમ્સને ક્રોસ એક્સિસ પર એકસાથે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