این سایت برای ie9 طراحی نشده است

لطفا دستگاه خود را بچرخانید.

Using CSS Flexible Boxes

۱۵ مهر ۱۳۹۶ المیرا طایفه
بدون دیدگاه

چیدمان و صفحه آرایی صفحات وب سایت (layout) به صورت عکس العملی واکنشی(Responsive) و دارای چینش مناسب و کاربردی در تمام رسانه ها و واسط های کاربری متنوع ، دغدغه بسیار مهمی چه از نظر طراحان و چه برای کابران نهایی مطرح شده است.
برای همین منظور Frameworkهای متنوعی که مورد تایید کنسرسیوم جهانی وب ((World Wide Web Consortium (W3C) می باشند، ارائه شده اند که بخش عمده ای از نیازمندی ها را در این زمینه تامین می کنند.
(CSS3 (Cascading Style Sheets 3 نیز به عنوان بزرگترین مرجع Framework Layout در آخرین نسخه خود امکانی به نام Flexible boxes را ارائه نمود و این امکان را برای عناصری که می بایست رفتارهای انعطاف پذیرتری را در زمان نمایش در واسطه های کاربری در زمان طراحی با توجه به اندازه صفحه نمایش متفاوت ، داشته باشند ، فراهم آورد.
این خصوصیت برخلاف ساختار بلاکها نیازمند استفاده از Position Absolut, float و java script نمی باشد.
Flexible boxes جهت طراحی رابط کاربری با انعطاف پذیری بالایی بهینه شده و به آیتم های داخلی (child) این اجازه را می دهد که بتوانند نسبت به والد خود (parent) چه در عرض و چه ارتفاع با فاصله های متفاوت میانی هم تراز شوند (resize, stretch, or shrink). قرار دادن این آیتم ها می تواند برای ساخت و طراحی در دو بعد (محور اصلی و محور متقاطع) استفاده شوند.
اگر جهت انعطاف پذیری ستون باشد، محور عمودی محور اصلی(main axis) محسوب می شود و اگر ردیف باشد محور افقی می تواند محور متقاطع(cross axis) باشد.
به عنوان مثال اگر Container دارای خصوصیت Flex-direction: row باشد، بدین معنی ست که آیتم ها دارای انعطاف پذیری نسبت به یکدیگر به صورت افقی در محور اصلی هستند.


p1

Flex تلفیقی از نحوه نمایش Display block که مبتنی بر محور افقی و inline-block که بر مبتنی بر محور عمودی ست می باشد.در واقع این امکان را فراهم می کند که اجزای داخلی یک box بتوانند تغییر جهت یا اندازه داده یا چیدمان متفاوت تری را در مدیا های مختلف بر اساس هر دو محور داشته باشند.
در طراحی با Flex Box ها رسم بر این است که یک Container به عنوان parent معرفی میشود که خصوصیات زیر برایش قابل تعریف می باشند.
}container

۱-Display: flex; /* or inline-flex */

۲- ;Flex-direction: row | row-reverse | column | column-reverse
Flex-direction این امکان را به آیتم ها میدهد که در راستای ستون و یا ردیف ، در container قرار بگیرند.خصوصیت reverse ترتیب قرار گرفتن آیتم ها (child) ها را عکس می کند.
۳- ;Flex-wrap: nowrap | wrap | wrap-reverse
در حالت پیش فرض آیتم ها کنار هم و در یک خط قرار می گیرند ، wrap این امکان را می دهد که child ها با توجه به نوع چیدمانشان به خط بعد منتقل شوند.

p2

۴- ;Justify-content: flex-start | flex-end | center | space-between | space-around
مدیریت فاصله خالی بین آیتم ها توسط این خصوصیت کنترل می شود.

p3

۵- ;Align-items: flex-start | flex-end | center | baseline | stretch
رفتار پیش فرضی ست که به آیتم ها این اجازه را می دهد که در راستای محور متقاطع (cross axis) در خط فعلی قرار بگیرند، در واقع به عنوان justify-content برای محور متقاطع تعریف می شود.

p4

۶- ;Align-content: flex-start | flex-end | center | space-between | space-around | stretch
در زمانی که فضای خالی مابین آیتم ها باشد این خصوصیت با محاسبه فضای والد بر اساس محور متقاطع(cross axis) عمل خواهد کرد، در واقع مشابه عملکرد justify-content آیتم ها براساس محور اصلی (main axis) است.
(این خصوصیت در زمانی که آیتم ها فقط در یک خط قرار می گیرند کاربرد نخواهد داشت.)

{


و برای آیتم ها یا فرزندان داخلی خصوصیات زیر تعریف می شود.

(لازم به ذکر است که خصوصیات clear, float, vertical-align قابل اعمال بر item نمی باشد.)


}item

۱- order:
به طور پیش فرض آیتم ها به همان ترتیبی که ایجاد می شوند مرتب می شوند (Defult index) ، با استفاده از این خصوصیت می توان این ساختار را شکست و ترتیب قرارگیری را بر اساس طرح تغییر داد.
۲- flex-grow:
این ویژگی این امکان را به فرزندان می دهد که بتوانند نسبت به مابقی فرزندان فضا متفاوتی دراختیار بگیرند.
به طور پیش فرض تمام فرزندان دارای مقدار یک می باشند، بدین معنی که همه فرزندان از یک مقدار برابر نسبت به والد خود فضا در اختیار قرار خواهند داشت ، اگر برای فرزندی مقدار دو در نظر گرفته شود ، بدین معنی ست که آن فرزند نسبت به مابقی آیتم ها دو برابر فضا در اختیار خواهد گرفت و مابقی فضای باقیمانده به صورت مساوی مابین دیگر فرزندان تقسیم می شود.

 

۳- flex-shrink: /* default*/ 1
این خصوصیت عکس خصوصیت قبل عمل می کند ، در واقع فضای کمتری را نسبت به مابقی فرزندان اختصاص می دهد.

 

۴- /*flex-basis: | auto; /* default auto
فضای مشخصی را بر اساس محتوای فرزند یا به صورت پیکسل لحاظ می کند.

 

۵- align-self: auto | flex-start | flex-end | center | baseline | stretch
در مواقعی نیاز است که برای فرزند مشخصی ، ساختار پیش فرض تعیین شده شکسته شود ، با استفاده از این خصوصیت می توان نحوه چینش فرزند را به صورت منحصر به فرد تغییر داد.
– فرمت کلی خصوصیت flex به صورت زیر می باشد.
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit

{

چند نکته ضروری که در طراحی Responsive باید مورد توجه قرار گیرد:

۱- خصوصیت flex برای parent یا همان Container ، لازم است که مقدار این خصوصیت در واسط ها ی متفاوت (media) ها از مقدار Row به عنوان مقدار پیش فرض،به مقدار column یا column wrap تغییر کند.
تغییر این خصوصیت این اجازه را به فرزندان میدهد که نحوه چیدمانشان براساس محور اصلی(main axis) باشد .
۲- بهتر است مقدار flex در Large screensها برای والد ، row تعریف شود.
۳- از خصوصیت order برای تعیین ترتیب هرکدام از فرزندان استفاده کنیم، در غیر این صورت مقدار صفر را برایشان تعیین کنیم.

۴- با استفاده از خصوصیت flex برای فرزندان می توان میزان فضای مورد نیازشان را مدیریت کنیم.
به عنوان مثال
}@media (min-width: 1200px)
}item
;Flex: 0 0 33.33%
{
{
برای فرزندان این امکان را ایجاد می کند در زمانی که صفحه نمایش مقداری بزرگتر از ۱۲۰۰ پیکسل دارد،اندازه آیتم ها با توجه به نوع flex تعیین شده برای container یا پدرشان که بر اساس محور عمودی یا افقی تعیین شده اند با میزان درصد ثابت یکسانی قرار بگیرند.
}@media (min-width: 760px)
.item }
;Flex: 0 0 100%
{
{
و در این media هر کدام از فرزندان تمام فضای ارث برده از پدر را به خود اختصاص میدهند.

برچسب ها :