آیتم‌های فلکس (Flex Items)

کنترل تک‌تک آیتم‌های فلکس: flex-grow، flex-shrink، flex-basis، order و align-self

آیتم‌های فلکس

فرزندان کانتینر فلکس، آیتم فلکس هستند. هر آیتم می‌تواند ویژگی‌های مستقل داشته باشد.

ویژگی‌های آیتم

ویژگیتوضیح
flex-growنسبت رشد
flex-shrinkنسبت جمع‌شدن
flex-basis</td><td>اندازه اولیه</td></tr> <tr><td><code>orderترتیب نمایش
align-selfتراز مستقل

flex-grow

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

flex-basis

.item {
        flex-basis: 200px;  /* اندازه اولیه */
        flex-basis: auto;   /* پیش‌فرض */
        flex-basis: content; /* بر اساس محتوا */
    }

shorthand: flex

.item {
        flex: 1;          /* grow=1 */
        flex: 0 0 200px;  /* grow=0, shrink=0, basis=200px */
        flex: auto;       /* 1 1 auto */
        flex: none;       /* 0 0 auto */
    }

order

.item-1 { order: 3; }  /* آخر نمایش داده می‌شود */
    .item-2 { order: 1; }  /* اول نمایش داده می‌شود */

align-self

.item {
        align-self: center;  /* مستقل از align-items */
        align-self: stretch;
        align-self: flex-start;
        align-self: flex-end;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

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