ساخت Flexbox

با یک محیط بصری، flex-direction، justify-content، align-items و ویژگی‌های هر آیتم را تنظیم کنید و کد CSS آن را بگیرید.

flex-direction

justify-content

align-items

flex-wrap

align-content

gap: 12px

آیتم‌ها

کد CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  flex-wrap: nowrap;
  gap: 12px;
}

.item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
}

.item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
}

.item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
}

ابزار ساخت Flexbox با محیط بصری، چیدمان انعطاف‌پذیر CSS را برای شما می‌سازد. چیدمان ردیفی و ستونی بدون سردرگمی.

با محیط بصری، flex-direction، justify-content، align-items و ویژگی هر آیتم را تنظیم کنید تا نتیجه را زنده ببینید و کد CSS را کپی کنید.

Flexbox قدرتمندترین ابزار چیدمان یک‌بعدی در CSS است، اما یادگیری خصوصیاتش زمان‌بر است؛ این ابزار آن را دیداری می‌کند.

توسعه‌دهندگان فرانت‌اند برای چیدمان منو و کارت از این ابزار استفاده می‌کنند. برای چیدمان دوبعدی از ساخت CSS Grid کمک بگیرید.

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

Flexbox چیست؟

Flexbox روش چیدمان CSS برای مرتب‌کردن عناصر در یک ردیف یا ستون است که فضا را به‌صورت انعطاف‌پذیر بین آن‌ها تقسیم می‌کند.

تفاوت justify-content و align-items چیست؟

justify-content چیدمان را در راستای اصلی و align-items را در راستای عمود بر آن کنترل می‌کند.

Flexbox بهتر است یا Grid؟

Flexbox برای چیدمان یک‌بعدی (ردیف یا ستون) و Grid برای چیدمان دوبعدی (ردیف و ستون هم‌زمان) مناسب‌تر است.

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

ساخت QR Codeاز هر متن یا آدرسی به‌صورت زنده یک QR Code بسازید — با اندازه‌ی دلخواه و خروجی PNG یا SVG.

فشرده‌سازی HTMLکامنت‌ها و فاصله‌های اضافی HTML را حذف کنید و درصد کاهش حجم را ببینید.

فشرده‌سازی CSSکامنت‌ها و فاصله‌های اضافی CSS را حذف کنید و درصد کاهش حجم را ببینید.

رمزنگاری و رمزگشایی Base64متن یا فایل تصویر را به Base64 تبدیل کنید یا رشته‌ی Base64 را به متن اصلی برگردانید.

فرمت‌کننده‌ی JSONJSON را پرتی‌پرینت یا فشرده کنید و در صورت نامعتبر بودن، خط خطا را ببینید.

دیکد کننده JWTتوکن JWT را به Header، Payload و Signature تجزیه کنید و زمان انقضای آن را ببینید.