جعبه های انعطاف پذیر (Flexbox) در CSS3

10 / 10
از 1 کاربر

جعبه های انعطاف پذیر، و یا flexbox، یک فن طرح جدید در CSS3 است. استفاده از این ویژگی متضمن این است که عناصر، زمانی که طرح صفحه باید با سایز های مختلف صفحه نمایش و همچنین صفحه نمایش های دستگاه های مختلف همسان شود، همانطور که پیش بینی شده است، رفتار می کنند. برای بسیاری از برنامه ها، مدل جعبه انعطاف پذیر، بهبود در مدل بلوک است که در آن از float ها استفاده نشده است.

مفاهیم جعبه انعطاف پذیر (Flexbox Concepts) در CSS3

جعبه انعطاف پذیر از flex containers و flex items تشکیل شده است.
یک flex container از طریق تنظیم ویژگی نمایش (display) یک عنصر به صورت flex (نمایش به صورتیک بلوک) و یا inline-flex (نمایش به صورت خطی)، شناخته می شود. در داخل یک ظرف انعطاف پذیر (flex containers) یک یا چند آیتم انعطاف پذیر (flex items) وجود دارد.

نکته: هر چیزی خارج از یک ظرف انعطاف پذیر و داخل یک آیتم انعطاف پذیر به صورت معمول نمایش داده می شود. Flexbox تعیین کننده این است که آیتم های انعطاف پذیر چگونه داخل یک ظرف انعطاف پذیر گذاشته شوند.

flex item ها در طول یک خط انعطاف پذیر ( flex line) در داخل flex containers قرار می گیرند. به صورت پیش فرض تنها یک flex line در هر flex containers وجود دارد.
مثال زیر نشان دهنده سه flex item است. آنها به صورت پیش فرض قرار گرفته اند: در طول flex line افقی از سمت چپ به راست:

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}

.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>

</body>
</html>

همچنین امکان تغییر جهت flex line نیز وجود دارد. اگر در هنگام طراحی سایت ویژگی جهت (direction) را به صورت rtl (راست به چپ) تنظیم کنیم، متن به صورت راست به چپ کشیده می شود و flex line نیز تغییر جهت می دهد و در نتیجه طرح بندی صفحه تغییر می کند.

جهت فلکس (Flex Direction)

ویژگی flex-direction تعیین کننده جهت flexible item ها در داخل flex container است. مقدار پیش فرض این ویژگی ردیف یا row (از چپ به راست، از بالا به پایین) است.
سایر مقادیری که در طراحی سایت می توان برای این ویژگی در نظر گرفت به صورت زیر هستند:

• row-reverse (معکوس ردیف): اگر جهت writing-mode از چپ به راست باشد، flex item ها به صورت راست به چپ قرار می گیرند.

• column (ستون): اگر سیستم نوشتن به صورت افقی است، flex item ها به صورت عمودی گذاشته می شوند.

• column-reverse: مشابه column اما به صورت معکوس آن.

مثال:

.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 400px;
height: 250px;
background-color: lightgrey;
}

سایر ویژگی هایی که در قرار می گیرند به شرح زیر هستند:

1. ویژگی justify-content

این ویژگی در بر دارنده مقادیر زیر است:

• flex-start ( مقدار پیش فرض) : آیتم ها در ابتدای ظرف قرار می گیرند.
• flex-end: آیتم ها در انتهای ظرف قرار می گیرند.
• center: آیتم ها در مرکز ظرف قرار می گیرند.
• space-between: آیتم ها با فضای بین خطوط قرار می گیرند.
• space-around: آیتم ها با فاصله قبل، بین و بعد از خطوط جای گذاری می شوند.

2. ویژگی align-items در طراحی سایت با CSS3

مقادیر مجاز در این ویژگی عبارتند از :

• stretch (مقدار پیش فرض): آیتم ها به تناسب ظرف فلکس کشیده می شوند.
• flex-start: آیتم ها در بالای ظرف قرار می گیرند.
• flex-end : آیتم ها در پایین ظرف گذارده می شوند.
• center : آیتم ها در مرکز ظرف قرار داده می شوند.
• baseline: آیتم ها در مبنای ظرف قرار می گیرند.

3. ویژگی flex-wrap

مقادیر قابل قبول برای استفاده در این ویژگی به شرح زیر می باشند.

• nowrap (مقدار پیش فرض) : در این حالت، ایتم ها، لفافه دار و یا به اصطلاح wrap نمی شوند.
• wrap : در این حالت در صورت لزوم آیتم ها پوشانده می شوند.
• wrap-reverse : در صورت لزوم آیتم ها به صورت معکوس wrap می شوند.

4. ویژگی align-content

مقادیری که می توان به این ویژگی اتلاق کرد عبارتند از:

• stretch (مقدار پیش فرض): خطوط به منظور پر کردن فضای باقی مانده کشیده می شوند.
• flex-start: خطوط به سمت ابتدای ظرف فلکس بسته بندی می شوند.
• flex-end:خطوط به سمت انتهای ظرف فلکس بسته بندی می شوند.
• center:خطوط به سمت مرکز ظرف فلکس بسته بندی می شوند.
• space-between:خطوط به طور مساوی در سطح ظرف توزیع می شوند.
• space-around:خطوط به طور مساوی با نصف اندازه فاصله در دو سطح انتهایی ظرف توزیع می شوند.

ویژگی های آیتم ها را در ادامه در بخش مقالات مربوط به طراحی سایت و در قسمت آموزش CSS3 بیان خواهیم کرد.

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