LibraTool logoLibraTool

મફત CSS ફ્લેક્સબોક્સ જનરેટર

લાઇવ આઇટમ પર ફ્લેક્સ ડાયરેક્શન, રેપ, જસ્ટિફાય અને અલાઇન સાથે પ્રયોગ કરો — અને CSS કૉપિ કરો.

એક વાર લોડ થયા પછી ઑફલાઇન કામ કરે છે
પ્રીસેટ્સ

ટિપ: પ્રીવ્યૂમાં આઇટમ પર ક્લિક કરીને તેના પર flex-grow: 1 ટૉગલ કરો.

લાઇવ પ્રીવ્યૂ
css
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

🔒 બધું તમારા બ્રાઉઝરમાં ચાલે છે — કંઈ પણ અપલોડ થતું નથી.

આ કેવી રીતે કાર્ય કરે છે

Interactive flexbox playground: flex-direction, wrap, justify-content, અને align-items switch કરો અને 10 સુધીના live items ને તરત ફરીથી ગોઠવાતા જુઓ. કોઈપણ item ને flex-grow: 1 આપવા અને તે કેવી રીતે space claim કરે તે જોવા ક્લિક કરો. CSS live અપડેટ થાય છે, તમારા project માં copy કરવા તૈયાર.

  1. 1
    Container સેટ કરો
    દિશા, રેપ, justify-content, align-items, ગેપ.
  2. 2
    Items ઉમેરો
    એકથી દસ numbered flex items.
  3. 3
    પ્રયોગ કરો
    Flex-grow ટૉગલ કરવા અને effect જોવા item પર ક્લિક કરો.
  4. 4
    CSS કૉપી કરો
    Container (અને item) rules, પેસ્ટ કરવા તૈયાર.

બધું તમારા બ્રાઉઝરમાં ચાલે છે — કંઈ પણ અપલોડ થતું નથી.

સંબંધિત સાધનો

🟦

CSS ગ્રિડ જનરેટર

CSS ગ્રિડને દ્રશ્ય રીતે ડિઝાઇન કરો — ટ્રેક, યુનિટ અને ગેપ — અને જનરેટ થયેલ CSS અને HTML કૉપિ કરો.

પ્રયાસ કરો
🎨

CSS બોક્સ શેડો જનરેટર

લાઇવ પ્રિવ્યુ, મલ્ટિ-લેયર સ્ટેકિંગ, કલર પિકર, ઇનસેટ ટોગલ અને એક-ક્લિક કોપી સાથે CSS box-shadow માટે વિઝ્યુઅલ બિલ્ડર. Material, ન્યુમોર્ફિઝમ અને ગ્લો પ્રીસેટ સામેલ છે.

પ્રયાસ કરો
◖

CSS બોર્ડર રેડિયસ જનરેટર

દરેક ખૂણા પર સ્વતંત્ર નિયંત્રણ સાથે ગોળાકાર ખૂણા વિઝ્યુઅલી ડિઝાઇન કરો. ઓર્ગેનિક બ્લોબ આકારો માટે એલિપ્ટિકલ X/Y સિન્ટેક્સ સપોર્ટ કરે છે.

પ્રયાસ કરો

વારંવાર પૂછાતા પ્રશ્નો