CSS Flexbox લેઆઉટની વિઝ્યુઅલ સમજૂતી
CSS Flexbox એ વેબ ડિઝાઇન માટે અત્યંત શક્તિશાળી લેઆઉટ સિસ્ટમ છે. આ સિસ્ટમનો ઉપયોગ મુખ્યત્વે ફ્લેક્સ કન્ટેનર અને તેની અંદર રહેલી આઇટમ્સને વ્યવસ્થિત રીતે ગોઠવવા માટે થાય છે. જ્યારે કોઈ વ્યક્તિ વિઝ્યુઅલ રીતે CSS flexbox લેઆઉટ ડિઝાઇન કરવા માંગે છે, અથવા ફ્લેક્સ કન્ટેનર અને તેની આઇટમ્સ માટે ઝડપથી CSS કોડ જનરેટ કરવા માંગે છે, ત્યારે આ સાધન ખૂબ ઉપયોગી બને છે. આ ઉપરાંત, જે લોકો લેઆઉટ પર વિવિધ ફ્લેક્સબોક્સ પ્રોપર્ટીઝની અસરોને પ્રાયોગિક રીતે સમજવા માંગે છે, તેમના માટે આ એક આદર્શ માધ્યમ છે.
આ ટૂલની મદદથી તમે સામાન્ય લેઆઉટ પેટર્ન જેમ કે કેન્દ્ર (Center), નેવબાર (Navbar), સ્ટેક (Stack), કાર્ડ્સ (Cards), અથવા સાઇડબાર (Sidebar) સરળતાથી બનાવી શકો છો.
કન્ટેનર (Container) પ્રોપર્ટીઝ અને તેની અસરો
ફ્લેક્સબોક્સ લેઆઉટની શરૂઆત પેરન્ટ એલિમેન્ટ એટલે કે કન્ટેનરથી થાય છે. આ ટૂલમાં કન્ટેનરના વર્તનને નિયંત્રિત કરવા માટે નીચેના વિકલ્પો ઉપલબ્ધ છે:
- દિશા (Direction): આ પ્રોપર્ટી નક્કી કરે છે કે આઇટમ્સ કઈ દિશામાં ગોઠવાશે. તેના વિકલ્પોમાં રો (Row), વિપરીત રો, કૉલમ, અને વિપરીત કૉલમ નો સમાવેશ થાય છે. જ્યારે તમે દિશા રો માંથી કૉલમમાં બદલો છો, ત્યારે મુખ્ય ધરી (main axis) અને ક્રોસ ધરી (cross axis) પરસ્પર બદલાઈ જાય છે, જે
justify-contentઅનેalign-itemsની કાર્યપદ્ધતિને સીધી રીતે અસર કરે છે. - રેપ: આ કંટ્રોલ નક્કી કરે છે કે આઇટમ્સ એક જ લાઇનમાં સમાઈ જશે કે નવી લાઇનમાં જશે. તેમાં નો રેપ (No wrap), રેપ (Wrap), અને રિવર્સ રેપ ના વિકલ્પો મળે છે. જો નો રેપ પસંદ કરેલ હોય, તો બધી આઇટમ્સને ફરજિયાત પણે એક જ લાઇનમાં રાખવામાં આવે છે. જ્યારે રેપ ચાલુ હોય, ત્યારે જે આઇટમ્સ કન્ટેનરમાં ફિટ નથી થતી તે આપોઆપ નીચેની નવી લાઇનમાં જતી રહે છે.
- કન્ટેન્ટ જસ્ટિફાય કરો: આ પ્રોપર્ટી મુખ્ય ધરી પર આઇટમ્સની ગોઠવણી નક્કી કરે છે. તેમાં શરૂઆત, અંત (End), કેન્દ્ર (Center), વચ્ચે જગ્યા, આસપાસ જગ્યા, અને સમાન જગ્યા જેવા વિકલ્પો ઉપલબ્ધ છે.
- આઇટમ્સ સંરેખિત કરો: આ ક્રોસ ધરી પર આઇટમ્સને ગોઠવવા માટે વપરાય છે. તેના વિકલ્પોમાં શરૂઆત, અંત (End), કેન્દ્ર (Center), સ્ટ્રેચ, અને બેઝલાઇન સામેલ છે.
- કન્ટેન્ટ સંરેખિત કરો: જ્યારે રેપિંગ ચાલુ હોય અને મલ્ટિ-લાઇન લેઆઉટ બને, ત્યારે આ પ્રોપર્ટી લાઇનોના આખા જૂથ વચ્ચેની જગ્યા નક્કી કરે છે. તેમાં શરૂઆત, અંત (End), કેન્દ્ર (Center), સ્ટ્રેચ, વચ્ચે જગ્યા, આસપાસ જગ્યા, અને સમાન જગ્યા સેટ કરી શકાય છે.
- ગેપ (Gap): આ એક ન્યુમેરિકલ વેલ્યુ છે, જે આઇટમ્સ વચ્ચે અને લાઇનો વચ્ચે ખાલી જગ્યા (સ્પેસ) સેટ કરે છે.
આઇટમ્સ ના વ્યક્તિગત કંટ્રોલ્સ
કન્ટેનર ઉપરાંત, તમે તેની અંદર રહેલી દરેક આઇટમને વ્યક્તિગત રીતે પણ નિયંત્રિત કરી શકો છો. જ્યારે તમે "આઇટમ ઉમેરો" બટન પર ક્લિક કરો છો, ત્યારે લેઆઉટમાં એક નવી આઇટમ ઉમેરાય છે (ઉદાહરણ તરીકે, "Item 5"). દરેક આઇટમ માટે નીચેની પ્રોપર્ટીઝ સેટ કરી શકાય છે:
- ક્રમ: આઇટમનો ક્રમ નક્કી કરવા માટેની ન્યુમેરિકલ વેલ્યુ.
- ગ્રો: આઇટમ ખાલી જગ્યા બચવા પર કેટલી મોટી થઈ શકે તેની ન્યુમેરિકલ વેલ્યુ.
- શ્રીંક: જગ્યા ઓછી હોવા પર આઇટમ કેટલી સંકોચાઈ શકે તેની ન્યુમેરિકલ વેલ્યુ.
- બેસિસ: આઇટમનું પ્રારંભિક કદ નક્કી કરવા માટે ન્યુમેરિકલ વેલ્યુ અથવા "ઑટો" (Auto).
- સેલ્ફ સંરેખિત કરો: કન્ટેનરના સામાન્ય સંરેખણથી અલગ જઈને કોઈ ચોક્કસ આઇટમ માટે વ્યક્તિગત ક્રોસ-એક્સિસ સંરેખણ સેટ કરવા માટે આનો ઉપયોગ થાય છે. તેમાં ઑટો (Auto), શરૂઆત, અંત (End), કેન્દ્ર (Center), સ્ટ્રેચ, અને બેઝલાઇન ના વિકલ્પો મળે છે.
મહત્વની બાબત એ છે કે જનરેટ થતા CSS કોડમાં માત્ર એવી જ આઇટમ્સ માટે અલગ નિયમો (CSS rules) બનશે, જેમના ગુણધર્મોમાં તમે ફેરફાર કર્યો હોય.
લાઇવ પ્રિવ્યૂ અને CSS આઉટપુટ
આ ટૂલ વાપરતી વખતે, તમે કંટ્રોલ્સમાં જે પણ ફેરફાર કરશો તેની સીધી અસર તમને સ્ક્રીન પર દેખાશે:
- લાઇવ વિઝ્યુઅલ પ્રિવ્યૂ: તમે કન્ટેનર અથવા આઇટમ્સના કંટ્રોલ્સ બદલશો કે તરત જ ફ્લેક્સબોક્સ લેઆઉટ લાઈવ પ્રિવ્યૂમાં તે જ ક્ષણે બદલાઈ જશે.
- CSS કોડ જનરેશન: ટૂલ આપોઆપ ફ્લેક્સ કન્ટેનર અને તેની આઇટમ્સ માટે સચોટ CSS કોડ તૈયાર કરે છે.
- કોડ કૉપિ કરવો: જ્યારે તમે "CSS કૉપિ કરો" બટન પર ક્લિક કરશો, ત્યારે તે બટનની સ્થિતિ બદલાઈને "Copied" થઈ જશે, જે દર્શાવે છે કે કોડ ક્લિપબોર્ડ પર કૉપિ થઈ ગયો છે.
ડેટા સુરક્ષા અને પ્રાઇવસી
આ ટૂલનો ઉપયોગ કરતી વખતે તમારી માહિતી સંપૂર્ણપણે સુરક્ષિત રહે છે. તમારું લેઆઉટ સીધું તમારા બ્રાઉઝરમાં જ બને છે. તમે અહીં સેટ કરેલી કોઈપણ માહિતી BroBroGo પર અપલોડ થતી નથી.
વારંવાર પૂછાતા પ્રશ્નો (FAQ)
justify-content અને align-items વચ્ચે શું તફાવત છે?
Justify-content આઇટમ્સને મુખ્ય ધરી (main axis) પર ગોઠવે છે — જે દિશામાં રો (row) કે કોલમ (column) વહે છે — જ્યારે align-items તેને બીજી ધરી (cross axis) પર ગોઠવે છે. જ્યારે તમે દિશા રો માંથી કોલમમાં બદલો છો, ત્યારે બંને ધરીઓ પરસ્પર બદલાઈ જાય છે, તેથી justify-content ઉપરથી નીચે અને align-items ડાબેથી જમણે કામ કરવા લાગે છે.
દરેક આઇટમના કંટ્રોલ્સ કેવી રીતે કામ કરે છે?
કોઈપણ આઇટમને તેના નંબરથી પસંદ કરો, પછી તે ખાલી જગ્યા ભરવા માટે કેટલી મોટી થાય (grow), જગ્યા ઓછી હોય ત્યારે કેટલી સંકોચાય (shrink), તેનું પ્રારંભિક કદ (basis) અને તેનું પોતાનું ક્રોસ-એક્સિસ એલાઇનમેન્ટ સેટ કરો. ઓર્ડર (order) પ્રોપર્ટી HTML ને અડક્યા વિના આઇટમને સ્ક્રીન પર વહેલી કે મોડી ખસેડે છે. તમે જે આઇટમ્સ બદલો છો ફક્ત તેના માટે જ CSS માં અલગ નિયમ બને છે.
wrap અને align-content ક્યારે મહત્વના બને છે?
જ્યારે રેપિંગ (wrapping) બંધ હોય, ત્યારે દરેક આઇટમને એક જ લાઇનમાં રહેવાની ફરજ પડે છે અને તે સાંકડી થઈ શકે છે. તેને ચાલુ કરવાથી જે આઇટમ્સ ફિટ નથી થતી તે આપોઆપ આગલી લાઇનમાં જતી રહે છે — આ સમયે align-content કામમાં આવે છે, જે લાઇનો વચ્ચે સ્પેસિંગ નક્કી કરે છે. ગેપ (gap) માર્જિન વિના આઇટમ્સ અને લાઇનો વચ્ચેની જગ્યા સેટ કરે છે.