مولد CSS Flexbox

بناء تخطيطات CSS flexbox بصرياً. تكوين خصائص الحاوية والعناصر مع معاينة مباشرة ونسخ CSS المولد.

flex-direction

justify-content

align-items

flex-wrap

gap: 10px

Preview

Generated CSS

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

Quick Presets

CSS Flexbox - التفاصيل التقنية

Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit into smaller spaces. Use flex-direction for main axis, justify-content for main axis alignment, and align-items for cross axis alignment.

بديل سطر الأوامر

/* Common flexbox patterns */\n.container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}

المرجع

عرض المواصفات الرسمية