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>

🔒 ሁሉም ነገር በአሳሽዎ ውስጥ ይሠራል — ምንም ነገር አይሰቀልም።

እንዴት እንደሚሠራ

በይነተገናኝ የflexbox መሞከሪያ፦ flex-directionን፣ wrapን፣ justify-contentን እና align-itemsን ይቀይሩ እና እስከ 10 የቀጥታ ንጥሎች ወዲያውኑ እንደገና ሲደራጁ ይመልከቱ። flex-grow: 1 ለመስጠት እና ቦታ እንዴት እንደሚይዝ ለማየት ማንኛውንም ንጥል ይጫኑ። CSSው በቀጥታ ይዘምናል፤ ወደ ፕሮጀክትዎ ለመቅዳት ዝግጁ ነው።

  1. 1
    መያዣውን ያዘጋጁ
    አቅጣጫ፣ wrap፣ justify-content፣ align-items፣ gap።
  2. 2
    ንጥሎችን ያክሉ
    ከአንድ እስከ አሥር ቁጥር ያላቸው የflex ንጥሎች።
  3. 3
    ይሞክሩ
    flex-growን ለማብራት/ለማጥፋት እና ውጤቱን ለማየት ንጥል ይጫኑ።
  4. 4
    CSSውን ይቅዱ
    የመያዣው (እና የንጥሉ) ሕጎች፣ ለመለጠፍ ዝግጁ።

ሁሉም ነገር በአሳሽዎ ውስጥ ይሠራል — ምንም አይሰቀልም።

ተዛማጅ መሳሪያዎች

🟦

የCSS ግሪድ መፍጠሪያ

CSS ግሪድን በእይታ ይንደፉ — ትራኮች፣ አሃዶች እና ክፍተቶች — እና የተፈጠረውን CSS እና HTML ይቅዱ።

ሞክሩት
🎨

CSS Box Shadow ፈጣሪ

ለCSS box-shadow ምስላዊ ገንቢ ከቀጥታ ቅድመ-እይታ፣ ብዙ-ንብርብር ውቅር፣ የቀለም መራጭ፣ inset ማብሪያ እና በአንድ-ጠቅ ቅጂ ጋር። Material፣ neumorphism እና glow ቅድመ-ውቅሮችን ያካትታል።

ሞክሩት
◖

CSS Border Radius ፈጣሪ

በእያንዳንዱ ጠርዝ ላይ ገለልተኛ ቁጥጥር ያለው ክብ ጠርዞችን ምስላዊ ዲዛይን ያድርጉ። ለኦርጋኒክ ቅርጾች elliptical X/Y አገባብን ይደግፋል።

ሞክሩት

ተደጋጋሚ ጥያቄዎች