ફ્લેક્સ
રિસ્પોન્સિવ ફ્લેક્સબોક્સ ઉપયોગિતાઓના સંપૂર્ણ સ્યુટ સાથે ગ્રીડ કૉલમ, નેવિગેશન, ઘટકો અને વધુના લેઆઉટ, સંરેખણ અને કદને ઝડપથી મેનેજ કરો. વધુ જટિલ અમલીકરણો માટે, કસ્ટમ CSS જરૂરી હોઈ શકે છે.
display
ફ્લેક્સબોક્સ કન્ટેનર બનાવવા માટે ઉપયોગિતાઓ લાગુ કરો અને સીધા બાળકોના ઘટકોને ફ્લેક્સ વસ્તુઓમાં રૂપાંતરિત કરો. ફ્લેક્સ કન્ટેનર અને વસ્તુઓ વધારાના ફ્લેક્સ ગુણધર્મો સાથે વધુ સંશોધિત કરવામાં સક્ષમ છે.
<div class="d-flex p-2">I'm a flexbox container!</div>
<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
દિશા ઉપયોગિતાઓ સાથે ફ્લેક્સ કન્ટેનરમાં ફ્લેક્સ વસ્તુઓની દિશા સેટ કરો. મોટા ભાગના કિસ્સાઓમાં તમે બ્રાઉઝર ડિફોલ્ટ હોવાથી અહીં આડા વર્ગને છોડી શકો છો row
. જો કે, તમે એવી પરિસ્થિતિઓનો સામનો કરી શકો છો જ્યાં તમારે આ મૂલ્યને સ્પષ્ટપણે સેટ કરવાની જરૂર હોય (જેમ કે પ્રતિભાવ લેઆઉટ).
.flex-row
આડી દિશા (બ્રાઉઝર ડિફૉલ્ટ) સેટ કરવા અથવા .flex-row-reverse
વિરુદ્ધ બાજુથી આડી દિશા શરૂ કરવા માટે ઉપયોગ કરો .
<div class="d-flex flex-row">
<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
વિરુદ્ધ બાજુથી ઊભી દિશા શરૂ કરવા માટે ઉપયોગ કરો.
<div class="d-flex flex-column">
<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
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
જ્યારે તમે સ્વતઃ માર્જિન સાથે ફ્લેક્સ સંરેખણને મિશ્રિત કરો છો ત્યારે ફ્લેક્સબોક્સ કેટલીક અદ્ભુત વસ્તુઓ કરી શકે છે. ઓટો માર્જિન દ્વારા ફ્લેક્સ આઇટમ્સને નિયંત્રિત કરવાના ત્રણ ઉદાહરણો નીચે બતાવ્યા છે: ડિફોલ્ટ (કોઈ ઓટો માર્જિન નથી), બે આઇટમ્સને જમણી તરફ ધકેલવી ( .mr-auto
), અને બે આઇટમ્સને ડાબી તરફ ધકેલવી ( .ml-auto
).
કમનસીબે, IE10 અને IE11 ફ્લેક્સ આઇટમ્સ પર સ્વતઃ માર્જિનને યોગ્ય રીતે સમર્થન આપતા નથી કે જેમની પેરેન્ટ પાસે બિન-ડિફોલ્ટ justify-content
મૂલ્ય છે. વધુ વિગતો માટે આ સ્ટેકઓવરફ્લો જવાબ જુઓ .
<div class="d-flex">
<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">
<div class="mr-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">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
align-items
, flex-direction: column
, અને margin-top: auto
અથવા મિશ્રણ કરીને કન્ટેનરની ઉપર અથવા નીચે એક ફ્લેક્સ આઇટમને ઊભી રીતે ખસેડો margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" 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" 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
મુઠ્ઠીભર ઉપયોગિતાઓ સાથે ચોક્કસ ફ્લેક્સ વસ્તુઓનો વિઝ્યુઅલ ક્રમ બદલો . order
અમે ફક્ત આઇટમને પ્રથમ અથવા છેલ્લી બનાવવા માટેના વિકલ્પો પ્રદાન કરીએ છીએ, તેમજ DOM ઓર્ડરનો ઉપયોગ કરવા માટે રીસેટ કરીએ છીએ. order
કોઈપણ પૂર્ણાંક મૂલ્ય (દા.ત.,) લે છે તેમ , 5
કોઈપણ વધારાના જરૂરી મૂલ્યો માટે કસ્ટમ CSS ઉમેરો.
<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-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
ગોઠવવા માટે ફ્લેક્સબોક્સ કન્ટેનર પર યુટિલિટીઝનો ઉપયોગ કરો . (બ્રાઉઝર ડિફૉલ્ટ), , , , , અથવા માંથી પસંદ કરો . આ ઉપયોગિતાઓને દર્શાવવા માટે, અમે ફ્લેક્સ વસ્તુઓની સંખ્યા લાગુ કરી છે અને વધારી છે.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