CSS Flexbox જનરેટર

CSS Flexbox શું છે?

CSS Flexbox (Flexible Box Layout) એ એક-પરિમાણીય લેઆઉટ મૉડેલ છે જે એક પંક્તિ અથવા કૉલમમાં જગ્યા વહેંચવા અને આઇટમ ગોઠવવા માટે ઉપયોગ થાય છે. flex કન્ટેઇનર display: flex વડે વ્યાખ્યાયિત થાય છે, અને તેના સીધા બાળ-ઘટકો flex આઇટમ બની જાય છે. મુખ્ય કન્ટેઇનર ગુણધર્મો: flex-direction (પંક્તિ અથવા કૉલમ), flex-wrap (એક vs. ઘણી-લાઇન), justify-content (મુખ્ય-અક્ષ ગોઠવણ), align-items (ક્રૉસ-અક્ષ ગોઠવણ પ્રતિ લાઇન), અને align-content (ઘણી લાઇનોની ક્રૉસ-અક્ષ ગોઠવણ). મુખ્ય આઇટમ ગુણધર્મો: flex-grow (આઇટમ કેટલી વધે છે), flex-shrink (કેટલી ઘટે છે), flex-basis (પ્રારંભિક કદ), અને align-self (ચોક્કસ આઇટમ માટે કન્ટેઇનરના align-items ને ઓવરરાઇડ કરે છે). Flexbox નેવિગેશન બાર, કાર્ડ પંક્તિઓ, કેન્દ્રિત લેઆઉટ અને કોઈ પણ એક-પરિમાણીય ગોઠવણ માટે આદર્શ છે.

CSS Flexbox જનરેટર કેવી રીતે ઉપયોગ કરવો

• ડ્રૉપડાઉન અને ઇનપુટ ઉપયોગ કરીને કન્ટેઇનર ગુણધર્મો (flex-direction, flex-wrap, justify-content, align-items, align-content, gap) ગોઠવો.

• પ્રીવ્યૂમાં કોઈ પણ આઇટમ પર ક્લિક કરો, તેને પસંદ કરો (નારંગી રંગ થઈ જાય છે).

• આઇટમ પૅનેલમાં પસંદ કરેલ આઇટમ ના flex-grow, flex-shrink, flex-basis અને align-self સેટ કરો.

• વધુ આઇટમ ઉમેરવા '+ આઇટમ ઉમેરો' ક્લિક કરો; પસંદ કરેલ આઇટમ ડિલીટ કરવા 'દૂર કરો' ક્લિક કરો.

• જેનરેટ થયેલ કૉડ જોવા CSS અને HTML ટૅબ વચ્ચે સ્વિચ કરો, પછી કૉપિ કરો ક્લિક કરો.

• ડિફૉલ્ટ 3-આઇટમ લેઆઉટ સાથે ફરીથી શરૂ કરવા 'બધું રીસેટ કરો' ક્લિક કરો.