ફ્લેક્સબોક્સની મૂળભૂત બાબતોથી આગળ વધો. align-content, flex-grow, flex-shrink અને વ્યવહારુ, વાસ્તવિક લેઆઉટ દૃશ્યો સાથે ઉન્નત ગોઠવણી અને વિતરણમાં નિપુણતા મેળવો.
CSS ફ્લેક્સબોક્સમાં નિપુણતા: ઉન્નત ગોઠવણી અને વિતરણ
કેટલાંક વર્ષોથી, CSS ફ્લેક્સબોક્સ આધુનિક વેબ લેઆઉટનો પાયાનો પથ્થર રહ્યો છે. મોટાભાગના ડેવલપર્સ display: flex નો ઉપયોગ કરીને આઇટમ્સને એક પંક્તિમાં ગોઠવવા અથવા સરળ કેન્દ્રિત કમ્પોનન્ટ્સ બનાવવા માટે આરામદાયક છે. જોકે, ફ્લેક્સબોક્સની સાચી નિપુણતા તેની ઉન્નત ગોઠવણી અને ગતિશીલ વિતરણ માટેના વધુ સૂક્ષ્મ ગુણધર્મોને સમજવામાં રહેલી છે. જ્યારે તમે justify-content: center અને align-items: center ની મૂળભૂત બાબતોથી આગળ વધો છો, ત્યારે તમે આશ્ચર્યજનક સરળતા સાથે જટિલ, રિસ્પોન્સિવ અને આંતરિક રીતે લવચીક લેઆઉટ બનાવવાની શક્તિને અનલોક કરો છો.
આ માર્ગદર્શિકા એવા ડેવલપર્સ માટે છે જેઓ મૂળભૂત બાબતો જાણે છે પરંતુ તેમની સમજને વધુ ઊંડી બનાવવા માગે છે. અમે એવા ગુણધર્મોનું અન્વેષણ કરીશું જે મલ્ટિ-લાઇન ગોઠવણીને નિયંત્રિત કરે છે, ફ્લેક્સ આઇટમ્સ કેવી રીતે વધે છે અને સંકોચાય છે તેની પાછળનો અત્યાધુનિક તર્ક, અને સામાન્ય લેઆઉટ પડકારોને હલ કરતી કેટલીક શક્તિશાળી પેટર્ન. એક સામાન્ય વપરાશકર્તામાંથી એક આત્મવિશ્વાસુ ફ્લેક્સબોક્સ આર્કિટેક્ટ બનવા માટે તૈયાર રહો.
પાયો: મુખ્ય અને ક્રોસ એક્સિસ પર એક ઝડપી પુનરાવર્તન
ઉન્નત વિષયોમાં ઊંડા ઉતરતા પહેલાં, તે બે એક્સિસની મજબૂત સમજ હોવી મહત્વપૂર્ણ છે જે દરેક ફ્લેક્સ કન્ટેનરને નિયંત્રિત કરે છે. ફ્લેક્સબોક્સમાં તમામ ગોઠવણી અને વિતરણ ગુણધર્મો આ બે એક્સિસમાંથી એક પર કાર્ય કરે છે.
- મુખ્ય એક્સિસ (The Main Axis): આ પ્રાથમિક એક્સિસ છે જેની સાથે ફ્લેક્સ આઇટમ્સ ગોઠવાયેલી હોય છે. તેની દિશા
flex-directionગુણધર્મ દ્વારા વ્યાખ્યાયિત કરવામાં આવે છે. - ક્રોસ એક્સિસ (The Cross Axis): આ એક્સિસ હંમેશા મુખ્ય એક્સિસને લંબરૂપ હોય છે.
મુખ્ય શીખવાની વાત એ છે કે આ એક્સિસ સ્થિર નથી. તે તમારા flex-direction મૂલ્યના આધારે પોતાની જાતને પુનઃ-દિશામાન કરે છે:
flex-direction: row(ડિફોલ્ટ): મુખ્ય એક્સિસ આડી (ડાબે-થી-જમણે) હોય છે, અને ક્રોસ એક્સિસ ઊભી (ઉપર-થી-નીચે) હોય છે.flex-direction: column: મુખ્ય એક્સિસ ઊભી (ઉપર-થી-નીચે) બને છે, અને ક્રોસ એક્સિસ આડી (ડાબે-થી-જમણે) બને છે.flex-direction: row-reverse: મુખ્ય એક્સિસ આડી હોય છે પરંતુ જમણે-થી-ડાબે ચાલે છે.flex-direction: column-reverse: મુખ્ય એક્સિસ ઊભી હોય છે પરંતુ નીચે-થી-ઉપર ચાલે છે.
આ મૂળભૂત ખ્યાલને ભૂલી જવું એ મોટાભાગની ફ્લેક્સબોક્સ મૂંઝવણનો સ્ત્રોત છે. ગોઠવણી ગુણધર્મ લાગુ કરતાં પહેલાં હંમેશા તમારી જાતને પૂછો: "મારી મુખ્ય એક્સિસ કઈ દિશામાં નિર્દેશ કરી રહી છે?"
justify-content સાથે મુખ્ય એક્સિસ વિતરણમાં નિપુણતા
justify-content ગુણધર્મ મુખ્ય એક્સિસ પર ફ્લેક્સ આઇટમ્સની વચ્ચે અને આસપાસની જગ્યા કેવી રીતે વહેંચવામાં આવે છે તે નિયંત્રિત કરે છે. જ્યારે flex-start, flex-end, અને center સીધા અને સરળ છે, ત્યારે વાસ્તવિક શક્તિ સ્પેસ-ડિસ્ટ્રિબ્યુશન મૂલ્યોમાં રહેલી છે.
જગ્યા વિતરણ પર ઊંડાણપૂર્વક નજર
ચાલો space-between, space-around, અને space-evenly વચ્ચેના સૂક્ષ્મ પરંતુ નિર્ણાયક તફાવતોને સ્પષ્ટ કરીએ.
-
justify-content: space-between;આ મૂલ્ય આઇટમ્સને મુખ્ય એક્સિસ પર સમાનરૂપે વિતરિત કરે છે. પ્રથમ આઇટમ કન્ટેનરની શરૂઆતમાં ધકેલાય છે, અને છેલ્લી આઇટમ છેક અંતમાં ધકેલાય છે. બાકીની બધી જગ્યા આઇટમ્સની વચ્ચે સમાન રીતે વહેંચવામાં આવે છે. બહારની કિનારીઓ પર કોઈ જગ્યા હોતી નથી.
ઉપયોગનો કેસ: નેવિગેશન બાર માટે ઉત્તમ છે જ્યાં તમે લોગોને ડાબી બાજુ અને લિંક્સને જમણી બાજુ ઇચ્છો છો, લિંક્સ વચ્ચે સમાન અંતર સાથે.
-
justify-content: space-around;આ મૂલ્ય દરેક આઇટમની આસપાસ સમાન જગ્યા સાથે આઇટમ્સનું વિતરણ કરે છે. દરેક આઇટમની ડાબી અને જમણી બાજુએ જગ્યાનો "બબલ" હોય તેવું વિચારો. જ્યારે બાજુ-બાજુની આઇટમ્સના બબલ મળે છે, ત્યારે તેમની વચ્ચેની જગ્યા કન્ટેનરની કિનારીઓ પરની જગ્યા કરતાં બમણી દેખાય છે. ખાસ કરીને, બહારની કિનારીઓ પરની જગ્યા આઇટમ્સ વચ્ચેની જગ્યાના અડધા કદની હોય છે.
ઉપયોગનો કેસ: કાર્ડ લેઆઉટ અથવા ગેલેરીઓ માટે ઉપયોગી છે જ્યાં તમે ઇચ્છો છો કે આઇટમ્સને કન્ટેનરની કિનારીઓથી થોડી શ્વાસ લેવાની જગ્યા મળે, પરંતુ તેની સામે બરાબર અડીને ન હોય.
-
justify-content: space-evenly;આ ત્રણેયમાં સૌથી વધુ સહજ છે. તે સુનિશ્ચિત કરે છે કે કોઈપણ બે આઇટમ્સ વચ્ચેની જગ્યા પ્રથમ/છેલ્લી આઇટમ અને કન્ટેનરની કિનારી વચ્ચેની જગ્યા જેટલી જ હોય છે. દરેક ગેપ એકસરખો હોય છે.
ઉપયોગનો કેસ: જ્યારે તમારે સંપૂર્ણ સંતુલિત, સપ્રમાણ લેઆઉટની જરૂર હોય ત્યારે આદર્શ છે. જ્યારે ડિઝાઇનર્સ "સમાન અંતર" માટે પૂછે છે ત્યારે તેઓ ગર્ભિત રીતે આ જ ઇચ્છતા હોય છે.
align-items અને align-self સાથે ક્રોસ એક્સિસ ગોઠવણી પર વિજય
જ્યારે justify-content મુખ્ય એક્સિસને સંભાળે છે, ત્યારે align-items એક જ લાઇનમાં ક્રોસ એક્સિસ પર આઇટમ્સની ડિફોલ્ટ ગોઠવણીનું સંચાલન કરે છે.
`align-items` મૂલ્યોને સમજવું
align-items: stretch;(ડિફોલ્ટ): આ જ કારણ છે કે તમારી ફ્લેક્સ આઇટમ્સ ઘણીવાર તમે પૂછ્યા વગર તેમના કન્ટેનરની ઊંચાઈ ભરી દેતી હોય તેવું લાગે છે. આઇટમ્સ ક્રોસ એક્સિસ પર કન્ટેનરના કદને ભરવા માટે ખેંચાશે (દા.ત.,flex-direction: rowકન્ટેનરમાં ઊંચાઈ).align-items: flex-start;: આઇટમ્સ ક્રોસ એક્સિસની શરૂઆતમાં ગોઠવાય છે.align-items: flex-end;: આઇટમ્સ ક્રોસ એક્સિસના અંતમાં ગોઠવાય છે.align-items: center;: આઇટમ્સ ક્રોસ એક્સિસ પર કેન્દ્રમાં ગોઠવાય છે.align-items: baseline;: આ એક શક્તિશાળી અને ઓછું વપરાતું મૂલ્ય છે. આઇટમ્સ એવી રીતે ગોઠવાય છે કે તેમની ટેક્સ્ટ બેઝલાઇન એક લાઇનમાં આવે. આ અત્યંત ઉપયોગી છે જ્યારે તમારી પાસે અલગ-અલગ ફોન્ટ કદવાળી આઇટમ્સ હોય (દા.ત., સબટાઈટલની બાજુમાં મુખ્ય શીર્ષક) અને તમે તેમને ફક્ત તેમના બોક્સની સીમાઓ દ્વારા જ નહીં, પરંતુ શાબ્દિક રીતે ગોઠવવા માંગો છો.
align-self સાથે ઓવરરાઇડ કરવું
જો તમે ઇચ્છો કે કોઈ એક ચોક્કસ આઇટમ અન્ય કરતા અલગ રીતે વર્તે તો શું? ત્યાં જ align-self કામમાં આવે છે. તે એક વ્યક્તિગત ફ્લેક્સ આઇટમ પર લાગુ થાય છે, અને તે ફક્ત તે આઇટમ માટે કન્ટેનરના align-items ગુણધર્મને ઓવરરાઇડ કરે છે. તે align-items જેવા જ બધા મૂલ્યો સ્વીકારે છે (વત્તા `auto`, જે તેને કન્ટેનરના મૂલ્ય પર રીસેટ કરે છે).
ઉદાહરણ: કાર્ડ્સની એક પંક્તિની કલ્પના કરો, જે બધા align-items: center સાથે કેન્દ્રિત છે. તમે એક "ફીચર્ડ" કાર્ડને align-self: stretch; લાગુ કરીને તેને અન્ય કરતા ઊંચું બનાવીને અલગ પાડી શકો છો.
અજાણ્યો હીરો: align-content સાથે ઉન્નત વિતરણ
આ દલીલપૂર્વક ફ્લેક્સબોક્સમાં સૌથી વધુ ગેરસમજ થયેલો ગુણધર્મ છે, અને તેમાં નિપુણતા મેળવવી એ ઉન્નત પ્રાવીણ્યની નિશાની છે. એક સામાન્ય મૂંઝવણનો મુદ્દો align-items સાથે તેની સમાનતા છે.
અહીં નિર્ણાયક નિયમ છે: જ્યારે તમારી ફ્લેક્સ આઇટમ્સ બધી એક જ લાઇન પર હોય ત્યારે align-content ની કોઈ અસર થતી નથી. તે ફક્ત ત્યારે જ કાર્ય કરે છે જ્યારે તમારી પાસે મલ્ટિ-લાઇન ફ્લેક્સ કન્ટેનર હોય (એટલે કે, તમે flex-wrap: wrap; સેટ કર્યું હોય અને આઇટમ્સ ખરેખર નવી લાઇનો પર વીંટળાઈ ગઈ હોય).
આ રીતે વિચારો:
align-itemsઆઇટમ્સને તેમની લાઇનમાં ગોઠવે છે.align-contentલાઇનોને જ કન્ટેનરની અંદર ગોઠવે છે. તે આઇટમ્સની પંક્તિઓ વચ્ચે ક્રોસ એક્સિસમાં જગ્યાના વિતરણને નિયંત્રિત કરે છે.
તે અનિવાર્યપણે justify-content જેવું કાર્ય કરે છે, પરંતુ ક્રોસ એક્સિસ માટે. તેના મૂલ્યો લગભગ સમાન છે:
align-content: flex-start;(ડિફોલ્ટ): બધી લાઇનો કન્ટેનરની શરૂઆતમાં ગોઠવાય છે.align-content: flex-end;: બધી લાઇનો અંતમાં ગોઠવાય છે.align-content: center;: બધી લાઇનો કેન્દ્રમાં ગોઠવાય છે.align-content: space-between;: પ્રથમ લાઇન શરૂઆતમાં છે, છેલ્લી લાઇન અંતમાં છે, અને જગ્યા લાઇનો વચ્ચે સમાનરૂપે વહેંચવામાં આવે છે.align-content: space-around;: દરેક લાઇન alrededor સમાન જગ્યા મૂકવામાં આવે છે.align-content: space-evenly;: દરેક લાઇન વચ્ચેનું અંતર સમાન હોય છે.align-content: stretch;: લાઇનો બાકીની જગ્યા લેવા માટે ખેંચાય છે.
ઉપયોગનો કેસ: એક ફોટો ગેલેરીની કલ્પના કરો જ્યાં આઇટમ્સ રેપ થાય છે. જો કન્ટેનરની ઊંચાઈ નિશ્ચિત હોય, તો ત્યાં વધારાની ઊભી જગ્યા બાકી રહી શકે છે. ડિફોલ્ટ રૂપે, આ જગ્યા તળિયે દેખાય છે. align-content: space-between; અથવા align-content: center; નો ઉપયોગ કરીને, તમે તમારા ફોટાઓની આખી ગ્રીડના ઊભા વિતરણને નિયંત્રિત કરી શકો છો, જે વધુ વ્યાવસાયિક દેખાતું લેઆઉટ બનાવે છે.
ગતિશીલ કદ અને વિતરણ: flex શોર્ટહેન્ડ
સ્થિર લેઆઉટ દુર્લભ છે. ફ્લેક્સબોક્સની સાચી શક્તિ ગતિશીલ સામગ્રી અને ઉપલબ્ધ જગ્યાને સંભાળવાની તેની ક્ષમતામાંથી આવે છે. આ ત્રણ ગુણધર્મો દ્વારા નિયંત્રિત થાય છે, જે ઘણીવાર flex શોર્ટહેન્ડ દ્વારા સેટ કરવામાં આવે છે: flex-grow, flex-shrink, અને flex-basis.
1. flex-basis: શરૂઆતનો બિંદુ
કોઈપણ વધારો કે ઘટાડો થાય તે પહેલાં, ફ્લેક્સબોક્સને દરેક આઇટમ માટે પ્રારંભિક કદની જરૂર હોય છે. આ કામ flex-basis નું છે. તે મુખ્ય એક્સિસ પર તત્વના ડિફોલ્ટ કદને વ્યાખ્યાયિત કરે છે.
- જો કોઈ ચોક્કસ લંબાઈ (દા.ત.,
200pxઅથવા10rem) પર સેટ કરેલ હોય, તો તે આઇટમનું પ્રારંભિક કદ બને છે. - જો
autoપર સેટ કરેલ હોય, તો તે આઇટમ પર `width` અથવા `height` ગુણધર્મ શોધે છે. જો કોઈ અસ્તિત્વમાં ન હોય, તો તે આઇટમની સામગ્રીના આધારે કદ નક્કી કરે છે. - જો
0પર સેટ કરેલ હોય, તો આઇટમનું કોઈ પ્રારંભિક કદ હોતું નથી અને તેનું અંતિમ કદ સંપૂર્ણપણે તેનાflex-growપ્રમાણ દ્વારા નક્કી કરવામાં આવે છે.
શ્રેષ્ઠ પ્રથા: ફ્લેક્સ સંદર્ભમાં `width` ને બદલે flex-basis નો ઉપયોગ કરવો ઘણીવાર વધુ સારું છે, કારણ કે તે મુખ્ય એક્સિસના સંદર્ભમાં આઇટમના કદને વ્યાખ્યાયિત કરવા વિશે વધુ સ્પષ્ટ છે.
2. flex-grow: હકારાત્મક જગ્યાનો વપરાશ
જ્યારે ફ્લેક્સ કન્ટેનરમાં તેની મુખ્ય એક્સિસ પર વધારાની જગ્યા હોય, ત્યારે flex-grow નક્કી કરે છે કે તે જગ્યા કેવી રીતે વહેંચવામાં આવે છે. તે એકમરહિત પ્રમાણ છે.
- ડિફોલ્ટ મૂલ્ય
0છે, જેનો અર્થ છે કે આઇટમ્સ વધારાની જગ્યા ભરવા માટે વધશે નહીં. - જો બધી આઇટમ્સમાં
flex-grow: 1હોય, તો વધારાની જગ્યા તેમની વચ્ચે સમાનરૂપે વહેંચવામાં આવે છે. - જો એક આઇટમમાં
flex-grow: 2હોય અને બીજીમાંflex-grow: 1હોય, તો પ્રથમ આઇટમ બીજી કરતાં બમણી વધારાની જગ્યા મેળવશે.
3. flex-shrink: નકારાત્મક જગ્યા (ઓવરફ્લો) સંભાળવી
આ `flex-grow` નો પ્રતિરૂપ છે. જ્યારે કન્ટેનરમાં બધી આઇટમ્સને તેમના flex-basis પર ફિટ કરવા માટે પૂરતી જગ્યા ન હોય, ત્યારે તેમને સંકોચવાની જરૂર પડે છે. flex-shrink નિયંત્રિત કરે છે કે તેઓ કેટલું સંકોચાય છે.
- ડિફોલ્ટ મૂલ્ય
1છે, જેનો અર્થ છે કે બધી આઇટમ્સ ઓવરફ્લોને રોકવા માટે ડિફોલ્ટ રૂપે પ્રમાણસર સંકોચાય છે. - જો તમે કોઈ આઇટમ પર
flex-shrink: 0સેટ કરો છો, તો તે સંકોચાશે નહીં. તે તેનુંflex-basisકદ જાળવી રાખશે, જે સંભવિતપણે કન્ટેનરને ઓવરફ્લો કરી શકે છે. આ લોગો અથવા બટનો જેવા તત્વો માટે ઉપયોગી છે જે ક્યારેય સંકુચિત થવા જોઈએ નહીં.
flex શોર્ટહેન્ડ: બધું એક સાથે મૂકવું
flex ગુણધર્મ એ flex-grow, flex-shrink, અને flex-basis માટેનો શોર્ટહેન્ડ છે, તે જ ક્રમમાં.
flex: 0 1 auto;(ડિફોલ્ટ): આઇટમ વધી શકતી નથી, સંકોચાઈ શકે છે, અને તેનો આધાર તેની પહોળાઈ/ઊંચાઈ અથવા સામગ્રી દ્વારા નક્કી થાય છે.flex: 1;(flex: 1 1 0;માટે શોર્ટહેન્ડ): એક ખૂબ જ સામાન્ય મૂલ્ય. આઇટમ વધી અને સંકોચાઈ શકે છે, અને તેનું પ્રારંભિક કદ 0 છે. આ અસરકારક રીતે આઇટમ્સને તેમના ફ્લેક્સ-ગ્રો પ્રમાણના આધારે જગ્યા વહેંચવા દે છે.flex: auto;(flex: 1 1 auto;માટે શોર્ટહેન્ડ): આઇટમ વધી અને સંકોચાઈ શકે છે, અને તેનો આધાર તેની સામગ્રી દ્વારા નક્કી થાય છે. આ આઇટમ્સને તેમની સામગ્રીના આધારે અલગ-અલગ કદમાં રહેવાની મંજૂરી આપે છે, પરંતુ હજી પણ વધારાની જગ્યાને લવચીક રીતે શોષી લે છે.flex: none;(flex: 0 0 auto;માટે શોર્ટહેન્ડ): આઇટમ સંપૂર્ણપણે બિન-લવચીક છે. તે વધી કે સંકોચાઈ શકતી નથી.
વ્યવહારુ ઉપયોગના કિસ્સાઓ અને ઉન્નત દૃશ્યો
દૃશ્ય 1: સ્ટીકી ફૂટર (હોલી ગ્રેઇલ લેઆઉટ)
એક ક્લાસિક વેબ ડિઝાઇન સમસ્યા: ફૂટરને પૃષ્ઠના તળિયે કેવી રીતે ચોંટાડવું, ભલે સામગ્રી ટૂંકી હોય, પણ જ્યારે સામગ્રી લાંબી હોય ત્યારે કુદરતી રીતે નીચે ધકેલાય.
.page-container {
display: flex;
flex-direction: column;
min-height: 100vh; /* Viewport Height */
}
.main-content {
flex-grow: 1; /* or flex: 1; */
}
મુખ્ય પૃષ્ઠ કન્ટેનરને કોલમ-આધારિત ફ્લેક્સબોક્સ બનાવીને અને મુખ્ય સામગ્રી વિસ્તારને flex-grow: 1 પર સેટ કરીને, અમે તેને બધી ઉપલબ્ધ ઊભી જગ્યાનો વપરાશ કરવા માટે કહીએ છીએ, જે ફૂટરને વ્યુપોર્ટના તળિયે ધકેલી દે છે.
દૃશ્ય 2: જૂથોને વિભાજીત કરવા માટે ઓટો માર્જિન
તમે ડાબી બાજુએ લોગો અને જમણી બાજુએ લિંક્સના જૂથ સાથે નેવિગેશન બાર કેવી રીતે બનાવો છો? જ્યારે લોગો એક જ ફ્લેક્સ આઇટમ હોય તો justify-content: space-between કામ કરે છે, પરંતુ જો તમારી પાસે જમણી બાજુએ બહુવિધ આઇટમ્સ હોય તો શું?
ઉકેલ ફ્લેક્સબોક્સમાં ઓટો માર્જિનનો જાદુ છે.
.navbar {
display: flex;
}
.logo {
/* No special properties needed */
}
.nav-links {
margin-left: auto;
}
ફ્લેક્સ કન્ટેનરમાં, ઓટો માર્જિન તે જે દિશામાં લાગુ કરવામાં આવે છે તે દિશામાં બધી ઉપલબ્ધ જગ્યાનો લોભપૂર્વક વપરાશ કરશે. નેવિગેશન લિંક્સના જૂથ પર margin-left: auto સેટ કરીને, તે લોગો અને લિંક્સ વચ્ચે એક લવચીક, ખાલી જગ્યા બનાવે છે, જે લિંક્સને જમણી બાજુએ ધકેલી દે છે.
દૃશ્ય 3: મીડિયા ઓબ્જેક્ટ
એક સામાન્ય UI પેટર્નમાં એક બાજુ છબી અથવા આઇકન અને બીજી બાજુ વર્ણનાત્મક ટેક્સ્ટ હોય છે. ટેક્સ્ટ બાકીની બધી જગ્યા લેવી જોઈએ અને સુંદર રીતે રેપ થવી જોઈએ.
.media-object {
display: flex;
align-items: flex-start; /* Aligns image and text to the top */
}
.media-image {
margin-right: 1rem;
flex-shrink: 0; /* Prevents the image from being squished */
}
.media-body {
flex-grow: 1; /* Takes up all remaining horizontal space */
}
અહીં, ટેક્સ્ટ કન્ટેનર પર flex-grow: 1 મુખ્ય ચાવી છે. તે સુનિશ્ચિત કરે છે કે છબી ગમે તેટલી પહોળી હોય, ટેક્સ્ટ બોડી કન્ટેનરમાં બાકીની ઉપલબ્ધ પહોળાઈને ભરવા માટે વિસ્તરશે.
નિષ્કર્ષ: ગોઠવણીથી આગળ, ઇરાદાપૂર્વકના લેઆઉટ તરફ
ફ્લેક્સબોક્સમાં નિપુણતા મેળવવાનો અર્થ ફક્ત વસ્તુઓને કેન્દ્રમાં રાખવાથી આગળ વધવાનો છે. તે એક્સિસ વચ્ચેની આંતરક્રિયા, જગ્યા વિતરણનો તર્ક અને આઇટમ કદની લવચીકતાને સમજવા વિશે છે. મલ્ટિ-લાઇન લેઆઉટ માટે align-content, ગતિશીલ કદ માટે flex શોર્ટહેન્ડ, અને ઓટો માર્જિન જેવી શક્તિશાળી પેટર્નની મજબૂત પકડ મેળવીને, તમે એવા લેઆઉટ બનાવી શકો છો જે માત્ર દૃષ્ટિની આકર્ષક જ નહીં પરંતુ મજબૂત, રિસ્પોન્સિવ અને અર્થપૂર્ણ રીતે સ્વચ્છ પણ હોય.
આગલી વખતે જ્યારે તમે કોઈ જટિલ લેઆઉટ પડકારનો સામનો કરો, ત્યારે ફ્લોટ્સ અથવા જટિલ પોઝિશનિંગ હેક્સ માટે પહોંચવાની ઇચ્છાને રોકો. તેના બદલે, તમારી જાતને પૂછો: શું આ જગ્યાના ઇરાદાપૂર્વકના વિતરણથી ઉકેલી શકાય છે? જવાબ, મોટાભાગે, CSS ફ્લેક્સબોક્સની ઉન્નત ક્ષમતાઓમાં મળશે.