ફ્લેક્સ
રિસ્પોન્સિવ ફ્લેક્સબોક્સ ઉપયોગિતાઓના સંપૂર્ણ સ્યુટ સાથે ગ્રીડ કૉલમ, નેવિગેશન, ઘટકો અને વધુના લેઆઉટ, સંરેખણ અને કદને ઝડપથી મેનેજ કરો. વધુ જટિલ અમલીકરણો માટે, કસ્ટમ 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
ઓટો માર્જિન
જ્યારે તમે સ્વતઃ માર્જિન સાથે ફ્લેક્સ સંરેખણને મિશ્રિત કરો છો ત્યારે ફ્લેક્સબોક્સ કેટલીક અદ્ભુત વસ્તુઓ કરી શકે છે. ઓટો માર્જિન દ્વારા ફ્લેક્સ આઇટમ્સને નિયંત્રિત કરવાના ત્રણ ઉદાહરણો નીચે બતાવ્યા છે: ડિફોલ્ટ (કોઈ ઓટો માર્જિન નથી), બે આઇટમ્સને જમણી તરફ ધકેલવી ( .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 ઓર્ડરનો ઉપયોગ કરવા માટે રીસેટ કરીએ છીએ. order
0 થી 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-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
Flexbox ઉપયોગિતાઓ અમારી યુટિલિટીઝ 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,
),
),