فلکس‌باکس پیشرفته و حرکت نرم

۱. gap: فاصله بین آیتم‌ها

در فصل قبل برای فاصله دادن به کارت‌ها از margin استفاده کردیم. این کار جواب می‌دهد اما یک عیب دارد: به لبه‌های بیرونی ظرف هم فاصله اضافه می‌کند و برای درست کردنش باید ترفندهایی بزنید. gap این مشکل را کاملاً حل می‌کند.

.container {
    display: flex;
    gap: 20px;                 /* فاصله یکسان بین همه آیتم‌ها */
}

.container2 {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 30px;            /* فاصله بین سطرها، سپس بین ستون‌ها */
}

gap: نمونه 01-gap

شرح مثال

• gap تنها بین آیتم‌ها فاصله می‌گذارد، نه در لبه‌های بیرونی ظرف. یعنی دقیقاً همان چیزی که معمولاً می‌خواهیم.
• اگر دو مقدار بدهید، اولی فاصله عمودی بین سطرها و دومی فاصله افقی بین ستون‌هاست. این حالت وقتی flex-wrap: wrap دارید معنی پیدا می‌کند.
• gap روی ظرف نوشته می‌شود، نه روی آیتم‌ها.

۲. رشد و کوچک شدن آیتم‌ها

تا اینجا آیتم‌ها عرض ثابتی داشتند. حالا سه ویژگی می‌بینیم که روی خود آیتم نوشته می‌شوند و تعیین می‌کنند هر آیتم چقدر از فضای موجود را بگیرد.

.container {
    display: flex;
    gap: 10px;
}

.sidebar {
    flex-basis: 250px;        /* اندازه شروع */
    flex-grow: 0;             /* رشد نکن */
    flex-shrink: 0;           /* کوچک هم نشو */
}

.content {
    flex-grow: 1;             /* تمام فضای باقی‌مانده را بگیر */
}

.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }     /* دو برابر item-a رشد می‌کند */

رشد و کوچک شدن: نمونه 02-flex-grow-shrink-basis

شرح مثال

flex-grow یک نسبت است، نه یک اندازه. اگر آیتم اول عدد ۱ و آیتم دوم عدد ۲ داشته باشد، فضای اضافه به نسبت یک به دو بینشان تقسیم می‌شود. اگر همه عدد ۱ بگیرند، فضا مساوی تقسیم می‌شود و همه هم‌عرض می‌شوند.

۳. ترتیب نمایش

.item {
    order: 0;                 /* پیش‌فرض همه آیتم‌ها */
}

.first {
    order: -1;                /* برو اول همه */
}

.last {
    order: 10;                /* برو آخر همه */
}

ترتیب نمایش: نمونه‌های 03-order و 03-order-flags

شرح مثال

order ترتیب نمایش آیتم‌ها را عوض می‌کند، بدون اینکه ترتیبشان در فایل HTML تغییر کند. همه آیتم‌ها به طور پیش‌فرض عدد صفر دارند و مرورگر آنها را از کوچک به بزرگ مرتب می‌کند. آیتم‌هایی با عدد یکسان، به ترتیب نوشته شدنشان در HTML می‌مانند.

عدد منفی کاملاً مجاز است و ساده‌ترین راه فرستادن یک آیتم به ابتداست، بدون اینکه لازم باشد عدد بقیه را عوض کنید.

۴. align-self

align-items که در فصل قبل دیدیم، روی ظرف نوشته می‌شود و همه آیتم‌ها را با هم جابه‌جا می‌کند. align-self همان کار را برای یک آیتم انجام می‌دهد.

.container {
    display: flex;
    align-items: center;        /* قانون کلی برای همه */
    height: 250px;
}

.special {
    align-self: flex-start;     /* استثنا: فقط این یکی بالا بماند */
}

.other {
    align-self: flex-end;       /* و این یکی پایین */
}

align-self: نمونه 04-align-self

شرح مثال

مقدارهای align-self دقیقاً همان مقدارهای align-items هستند: flex-start، center، flex-end و stretch. تنها تفاوت این است که align-self روی آیتم نوشته می‌شود و قانون ظرف را برای همان آیتم نادیده می‌گیرد.

الگوی فکری این است: قانون کلی را روی ظرف بنویسید و استثناها را روی آیتم‌ها. این همان کاری است که همیشه در CSS بهترین نتیجه را می‌دهد؛ کد کوتاه می‌ماند و استثناها هم مشخص و خوانا هستند.

۵. حرکت نرم با transition

در فصل پنجم hover: را یاد گرفتیم، اما تغییر رنگ ناگهانی و پرشی اتفاق می‌افتاد. transition این تغییر را نرم و تدریجی می‌کند و ظاهر سایت را به شکل چشمگیری حرفه‌ای‌تر.

.btn {
    background-color: #2f4f4f;
    color: white;
    padding: 12px 28px;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #ff6347;
}

.card {
    border: 1px solid #dddddd;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: #ff6347;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

حرکت نرم: نمونه 05-hover-transition

شرح مثال

transition سه بخش دارد و معمولاً دو تای اول کافی است:

1. چه چیزی. نام ویژگی‌ای که باید نرم تغییر کند، مانند background-color. اگر بنویسید all، هر چیزی که عوض شود نرم عوض می‌شود.
2. چقدر طول بکشد. مانند 0.3s یعنی سه دهم ثانیه. واحد s ثانیه است و ms میلی‌ثانیه.
3. با چه سرعتی. مانند ease که پیش‌فرض است: آرام شروع می‌شود، تند می‌شود و آرام تمام می‌شود. linear یعنی سرعت ثابت.

۶. نمونه نهایی فصل

<body>

    <div class="layout">

        <aside class="sidebar">
            <h3>دسته‌بندی</h3>
            <p>وب</p>
            <p>شبکه</p>
            <p>گرافیک</p>
        </aside>

        <main class="content">
            <h2>دوره‌های ما</h2>

            <div class="cards">
                <div class="card">
                    <h3>طراحی وب</h3>
                    <p>پانزده جلسه</p>
                </div>
                <div class="card">
                    <h3>جاوااسکریپت</h3>
                    <p>بیست جلسه</p>
                </div>
                <div class="card featured">
                    <h3>دوره ویژه</h3>
                    <p>ثبت‌نام محدود</p>
                </div>
            </div>
        </main>

    </div>

</body>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Tahoma, sans-serif;
}

body {
    background-color: #f5f5f5;
    line-height: 1.9;
    padding: 30px;
}

/* چیدمان کلی: نوار کناری ثابت، محتوا کشسان */
.layout {
    display: flex;
    gap: 25px;
}

.sidebar {
    flex-basis: 220px;
    flex-shrink: 0;
    background-color: #2f4f4f;
    color: white;
    padding: 20px;
    border-radius: 10px;
}

.content {
    flex-grow: 1;
}

.content h2 {
    color: #2f4f4f;
    margin-bottom: 20px;
}

/* کارت‌ها */
.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

.card {
    flex-grow: 1;
    flex-basis: 200px;
    background-color: white;
    padding: 22px;
    border-radius: 10px;
    border: 1px solid #dddddd;
    transition: all 0.3s ease;
}

.card:hover {
    border-color: #ff6347;
    transform: translateY(-4px);
}

.card h3 {
    color: #2f4f4f;
    margin-bottom: 8px;
}

/* استثنا: کارت ویژه اول بیاید و کشیده شود */
.featured {
    order: -1;
    align-self: stretch;
    border-top: 4px solid #ff6347;
}

نمونه نهایی فصل: نمونه 06-final-example

شرح مثال

این مثال یک چیدمان واقعی سایت است و هر پنج مفهوم فصل در آن نقش دارد:

• gap. هم بین نوار کناری و محتوا و هم بین کارت‌ها. هیچ margin ای در کل فایل نیست.
• basis و grow و shrink. نوار کناری همیشه ۲۲۰ پیکسل می‌ماند چون flex-shrink: 0 دارد. محتوا با flex-grow: 1 هر چه باقی ماند را می‌گیرد. کارت‌ها هم flex-basis: 200px دارند و با flex-grow: 1 فضای خالی سطر آخر را پر می‌کنند تا لبه‌ها ناهموار نماند.
• order. کارت ویژه در HTML آخرین کارت است، اما با order: -1 اول نمایش داده می‌شود. ترتیب محتوا در فایل دست‌نخورده مانده است.
• align-self. ظرف کارت‌ها align-items: flex-start دارد، پس کارت‌ها به اندازه محتوایشان کوتاه می‌مانند. اما کارت ویژه با align-self: stretch تا ته کشیده می‌شود و بیشتر جلب توجه می‌کند.
• transition. روی حالت عادی کارت نوشته شده، پس هم رفتن و هم برگشتن نرم است.

در hover: کارت‌ها یک ویژگی تازه هم آمده است: transform: translateY(-4px) که کارت را چهار پیکسل به بالا می‌برد و حس «بلند شدن» می‌دهد. این ویژگی را در فصل سیزدهم کامل توضیح می‌دهیم.

خلاصه فصل