Flexbox: چیدمان یک‌بعدی

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

container

.row {
    display: flex;
    gap: 16px;
    flex-direction: row;         /* یا column */
    justify-content: center;     /* محور اصلی */
    align-items: center;         /* محور عرضی */
    flex-wrap: wrap;             /* شکستن خط */
}

• justify-content: flex-start, center, space-between, space-around
• align-items: center, flex-start, stretch

items

.item { flex: 1; }               /* پرکردن مساوی */
.sidebar { flex: 0 0 250px; }    /* عرض ثابت */
.item { order: 2; align-self: flex-end; }

الگوی طلایی: وسط کامل

.center { display: flex; justify-content: center; align-items: center; }

در پلی‌گراند، justify-content را عوض کن و نتیجه را ببین.