پرش به محتوای اصلی
LibraTool logoLibraTool

تولیدکننده CSS Flexbox رایگان

با جهت flex، wrap، 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>

🔒 همه چیز در مرورگرتان اجرا می‌شود — هیچ چیز بارگذاری نمی‌شود.

نحوه کار

یک زمین بازی تعاملی فلکس‌باکس: flex-direction، wrap، justify-content و align-items را جابه‌جا کنید و ببینید تا ۱۰ آیتم زنده بلافاصله دوباره می‌چینند. روی هر آیتم کلیک کنید تا flex-grow: 1 بگیرد و ببینید چگونه فضا را ادعا می‌کند. CSS همزمان به‌روز می‌شود، آماده کپی در پروژه شما.

  1. 1
    ظرف را تنظیم کنید
    جهت، wrap، justify-content، align-items، فاصله.
  2. 2
    آیتم اضافه کنید
    یک تا ده آیتم فلکس شماره‌گذاری‌شده.
  3. 3
    آزمایش کنید
    روی یک آیتم کلیک کنید تا flex-grow را روشن/خاموش کنید و اثر را ببینید.
  4. 4
    CSS را کپی کنید
    قواعد ظرف (و آیتم)، آماده برای جای‌گذاری.

همه‌چیز در مرورگر شما اجرا می‌شود — چیزی آپلود نمی‌شود.

ابزارهای مرتبط

🟦

تولیدکننده CSS Grid

یک CSS grid را بصری طراحی کنید — مسیرها، واحدها و شکاف‌ها — و CSS و HTML تولیدشده را کپی کنید.

امتحان کنید
🌈

تولید گرادیان CSS

گرادیان‌های CSS خطی، شعاعی و مخروطی با پیش‌نمایش زنده ایجاد کنید. CSS را با یک کلیک کپی کنید.

امتحان کنید
🎨

تولید سایه CSS

سازنده بصری برای box-shadow در CSS با پیش‌نمایش زنده، لایه‌بندی چندگانه، انتخابگر رنگ، تبدیل inset و کپی با یک کلیک. شامل پیش‌تنظیم‌های Material، neumorphism و درخشش.

امتحان کنید

سؤالات متداول