ویژگی felex item ها در CSS3

10 / 10
از 1 کاربر

همانطور که در مقاله " جعبه های انعطاف پذیر (Flexbox) در CSS3 " توضیح داده شد، felex box شامل دو بخش felex container و felex item است. در مقاله قبل به طور کامل در مورد ویژگی های felex container توضیح دادیم در این مقاله در مورد ویژگی felex item ها در CSS3 صحبت خواهیم کرد. اگر تمایل به کاربرد CSS3 در طراحی سایت خود دارید در این بخش با ما همراه باشید.

مرتب سازی (Ordering)

این ویژگی تعیین کننده ترتیب یک آیتم انعطاف پذیر نسبت به سایر آیتم ها در داخل ظرف مشابه است.

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}

.first {
-webkit-order: -1;
order: -1;
}

حاشیه (Margin)

تنظیم ویژگی Margin در حالت خودکار (margin: auto) در طراحی سایت ؛ موجب فرا گرفتن فضای اضافی می شود. با تنظیم margin: auto مشکل perfect centering نیز برطرف خواهد شد. از این ویژگی می توان برای قرار دادن flex item ها در موقعیت های مختلف استفاده کرد.

در مثال زیر ما ویژگی margin-right را به صورت خودکار (margin-right: auto) برای اولین آیتم فلکس تنظیم کردیم، که موجب می شود تا تمام فضای اضافی به سمت راست آن عنصر جذب شود.

.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}

.flex-item:first-child {
margin-right: auto;
}

ویژگی align-self

ویژگی align-self در flex item، ویژگی align-items در flex container را باطل می کند. این ویژگی مقدارهای مشابه ویژگی align-items را به خود می گیرد.

.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}

.item1 {
-webkit-align-self: flex-start;
align-self: flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}

.item3 {
-webkit-align-self: center;
align-self: center;
}

.item4 {
-webkit-align-self: baseline;
align-self: baseline;
}

.item5 {
-webkit-align-self: stretch;
align-self: stretch;
}

ویژگی flex

این ویژگی در طراحی سایت با CSS3 معین طول فلکس آیتم نسبت به سایر فلکس آیتم ها در داخل یک ظرف مشخص است. در مثال زیر اولین فلکس آیتم 2/4 فضا و دو فلکس آیتم بعدی 1/4 فضای آزاد را به خود اختصاص می دهند:

.flex-item {
background-color: cornflowerblue;
margin: 10px;
}

.item1 {
-webkit-flex: 2;
flex: 2;
}

.item2 {
-webkit-flex: 1;
flex: 1;
}

.item3 {
-webkit-flex: 1;
flex: 1;
}

ارسال نظر و نظرات ثبت شده