خصوصیت box-pack
مثال (خصوصیت box-pack)
این مثال عناصر یک div را با استفاده از هر دو خاصیت های box-pack و box-align در مرکز div قرار می دهد:
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
پشتیبانی مرورگرها
هیچ یک از مرورگرهای اصلی، خصوصیت background را پشتیبانی نمی کنند.
مرورگر Internet Explorer10، خاصیت جایگزین ms-flex-pack- را پشتیبانی می کند.
مرورگر Firefox، خاصیت جایگزین moz-box-pack- را پشتیبانی می کند.
مرورگرهای Safari، Opera، Chrome خاصیت جایگزین webkit-box-pack- را پشتیبانی می کند.
توجه: box های انعطاف پذیر در مرورگرهای Internet Explorer 9 و نسخه های قدیمی تر آن پشتیبانی نمی شود.
تعریف و کاربرد
با استفاده از خاصیت box-pack می توان مشخص کرد که فرزندان یک box هنگامی که سایز box از سایز فرزندان بیشتر است در کجا قرار گیرند.
این خاصیت مکان عمودی را در box های عمودی، و مکان افقی را در box های افقی مشخص می کند.
| مقدار پیشفرض | start |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.boxPack="center" |
نحوه استفاده
| مقدار | توضیحات | نمایش دادن |
|---|---|---|
| start |
برای boxهایی با جهت دهی نرمال، لبه سمت چپ اولین فرزند، در سمت راست قرار می گیرد، (فضای اضافی باقیمانده بعد از آخرین فرزند قرار می گیرد.) برای boxهایی با جهت دهی معکوس، لبه سمت راست آخرین فرزند، در سمت چپ قرار می گیرد، (فضای اضافی باقیمانده قبل از اولین فرزند قرار می گیرد.) |
نمایش دادن » |
| end |
برای boxهایی با جهت دهی نرمال، لبه سمت راست آخرین فرزند، در سمت راست قرار می گیرد، (فضای اضافی باقیمانده قبل از اولین فرزند قرار می گیرد.) برای boxهایی با جهت دهی معکوس، لبه سمت چپ اولین فرزند، در سمت چپ قرار می گیرد، (فضای اضافی باقیمانده قبل از اولین فرزند قرار می گیرد.) |
نمایش دادن » |
| center |
فضای اضافی به صورت مساوی تقسیم می شود، نیم از آن قبل از اولین فرزند و نیم دیگر بعد از آخرین فرزند قرار می گیرد. |
نمایش دادن » |
| justify |
فضای اضافی به طور مساوی بین فرزندان تقسیم می شود (هیچ فضای اضافی قبل از اولین فرزند و بعد از آخرین فرزند وجود ندارد) |
نمایش دادن » |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 6315
