მთავარ შინაარსზე გადასვლა
LibraTool logoLibraTool

CSS Flexbox შემქმნელი უფასოდ

აკეთეთ ექსპერიმენტი flex მიმართულებით, მოტეხვით, justify და align ცოცხლი ელემენტებით — და დააკოპიეთ 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, ხარვეზი.
  2. 2
    დაამატეთ ელემენტები
    ერთიდან ათამდე დანომრილი flex ელემენტი.
  3. 3
    ექსპერიმენტი
    დააწკაპუნეთ ელემენტზე flex-grow-ის გადასართავად და ეფექტის სანახავად.
  4. 4
    დააკოპირეთ CSS
    კონტეინერისა (და ელემენტის) წესები, ჩასასმელად მზა.

ყველაფერი თქვენს ბრაუზერში მუშაობს — არაფერი იტვირთება.

დაკავშირებული ინსტრუმენტები

🟦

CSS Grid შემქმნელი

ვიზუალურად დაამუშავეთ CSS grid — ტრეკები, ერთეულები და უფსები — და დააკოპიეთ გენერირებული CSS და HTML.

სცადე
🌈

CSS გრადიენტის გენერატორი

შექმენით ხაზობრივი, რადიალური და კონუსური CSS გრადიენტები პირდაპირი გადახედვით. დააკოპირეთ CSS ერთი დაჭერით.

სცადე
🎨

CSS Box Shadow გენერატორი

ვიზუალური ინსტრუმენტი CSS box-shadow-ის შესაქმნელად პირდაპირი გადახედვით, მრავალ-ფენიანი დაწყობით, ფერის ამომრჩეველით, inset გადართვით და ერთი დაჭერის კოპირებით. მოიცავს Material, neumorphism და glow წინასწარ დაყენებებს.

სცადე

ხშირად დასმული კითხვები