آینده لی اوت در سی اس اس و توضیح تخصصی دستورهای Flexbox

مدتی پیش در نردبان از Flexbox گفتیم و صحبت از این موضوع شد که این دستور می تواند آینده لی اوت های سی اس اس را تغییر دهد. حالا وقتش رسیده که نگاهی عمیق تر به آن داشته باشیم.
لی اوت Flexible (ساختار انعطاف پذیر که با تغییر عرض نمایشگر، عرض ستون ها تغییر می کند)، ستون های با ارتفاع مساوی و تغییر ترتیب قرار گیری المنت ها (element مانند تگ های div و p و span) در اچ تی ام ال (از طریق کدهای سی اس اس) چیزهایی هستند که قبلا در سی اس اس (CSS) وجود نداشتند، البته تاکنون. اما دستور فلکس باکس (flexbox) آمده است تا ایجاد هر ساختار انعطاف پذیری را آسان کند.

در این مقاله توضیح کاملی از خصوصیات فلکس باکس را آورده ایم تا با استفاده از آن یک دمو (نمونه اولیه) ساده از یک سایت را بسازیم: صفحه ای با لی اوت انعطاف پذیر، ستون هایی با ارتفاع یکسان، المنت هایی که می توان ترتیب آنها را تغییر داد (بدون توجه به ترتیب آنها در اچ تی ام ال). پس در ادامه با ما باشید.

پشتیبانی مرورگرها

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

مدل لی اوت فلکس باکس (flexible box layout model)

در سی اس اس از چند روش می توانستیم لی اوت (ساختار بندی و قرار دادن اجزای صفحه در کنارهم) ایجاد کنیم. استفاده از روش های block و inline. قرار دادن اجزا در یک table یا استفاده از position یا float.

فلکس باکس یک روش دیگر برای این کار را جلوی شما می نهد. همان طور که در عکس اصلی مطلب می بینید، در فلکس باکس دو محور وجود دارد: محور اصلی و محور عرضی (main axis and cross axis). این دو محور دارای عرض و ارتفاع (width and height)، نقطه شروع و پایان هستند.

چگونه یک فلکس باکس ایجاد کنیم

راحت ترین راه برای درک چگونگی فلکس باکس، این است که خودتان در عمل با آن کار کنید. برای این کار در این مقاله یک دمو می آوریم. در داخل فایل اچ تی ام ال دستورات زیر را وارد می کنیم. ساختار این صفحه قرار است بر حسب اندازه نمایشگر متغیر باشد (ریسپانسیو). در یک مونیتور بزرگ سه ستونه دیده شود و در یک مونیتور کوچک تک ستونه.

<div class="flex-container">
    <div class="header"><p>Header</p></div>
    <div class="content"><p>Main Content</p></div>
    <div class="sidebar primary"><p>Primary Sidebar</p></div>
    <div class="sidebar secondary"><p>Secondary Sidebar</p></div>
    <div class="footer"><p>Footer</p></div>
</div>

در بالا می بینید که ما یک تگ دیو (div) با کلاس flex-container داریم که باکس اصلی ما است و ۵ تگ دیو (header و footer و main content و دو sidebar) در آن قرار می گیرند.

آنچه که در کدهای بالا نیامده است مقداری متن جا پر کن (lorem ipsum) است که داخل main content و primary sidebar قرار می گیرند. همچنین مقداری استایل (style = دستور سی اس اس) اولیه برای افتراق و رنگ آمیزی دیوها و متون، پدینگ و غیره به کار رفته است. فایل سی اس اس base.css از فایل Zip در اینجا قابل دانلود است.

ایجاد یک فلکس باکس کار آسانی است. برای این کار display را مساوی یکی از دو مقدار زیر قرار می دهیم.

.flex-container {display: flex;}
.flex-container {display: inline-flex;}

دستور اول یک بلاک فلکس باکس و دومی یک این-لاین (inline) فلکس باکس می سازد. به عنوان مثال یک بلاک فلکس باکس بسازید، مانند زیر:

.flex-container {
  display: -webkit-flex;
  display: flex;
}

به این ترتیب عکس زیر ساخته می شود.

با این کد، ما یک فلکس باکس ساخته ایم، البته فعلا کار هیجان انگیزی انجام نمی دهد. به المنت های داخل فلکس باکس، فلکس آیتم (flex-item) می گوییم. آنها به صورت پیش فرض float:left هستند (این پیش فرض فلکس باکس است ولی ما از دستور float استفاده نکرده ایم).

برای اینکه پیشتیبانی بیشتری از مرورگرها را داشته باشیم دستور را به صورت زیر می نویسیم:

.flex-container {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

تغییر ترتیب و جهت (Ordering and orienting)

برای این کار از دستور flex-direction استفاده می شود. این دستور direction فلکس باکس را تعیین می کند و چهار مقدار ممکن دارد:

row (the default)
row-reverse
column
column-reverse

تا زمانی که برای این دستور مقداری تعریف نکرده باشید، مقدار پیش فرض (default، خط اول) به آن تعلق می گیرد. مقدار دوم (row-reverse) همه چیز را عمودی اما با ترتیب برعکس می چیند.

اگر مقدار column را به flex-direction بدهید، اولین فلکس باکس در بالا قرار می گیرد و سایرین به ترتیب زیر هم چیده می شوند. طبعا مقدار column-reverse برعکس عمل می کند.

معمولا در کنار دستور flex-direction، از دستور flex-wrap نیز استفاده می شود. این دستور تعیین می کند، فلکس باکس single-line باشد یا multiple-line و سه مقدار ممکن دارد:

nowrap
wrap
wrap-reverse

برای به کار گیری همزمان دو دستور بالا از دستور میانبر flex-flow استفاده می کنیم. برای مثال در این مقاله دستور زیر آماده است:

.flex-container {
-webkit-flex-flow: row wrap;    
flex-flow: row wrap;
}

این دستور همزمان مقادیر flex-direction و flex-wrap را تعیین کرده است.

همان طور که گفتیم، فلکس باکس آمده است تا ما را از قید و بند ترتیب قرار گیری المنت ها در اچ تی ام ال رها کند. اگر شما قبلا تجربه طراحی یک سایت ریسپانسیو داشته باشید، حتما آرزو کرده اید که ای کاش می توانستم ترتیب قرار گیری المنت های اچ تی ام ال را با دستورات سی اس اس تغییر دهم.
(reponsive = تغییر قرارگیری قسمت های سایت با توجه به رزولوشن مونیتور. مثلا سایت نردبان ریسپانسیو است چون ستون هایش بر حسب اندازه مرورگر تغییر می کند.)
فلکس باکس این مشکل را حل کرده است. برای مثال می توان ترتیب قرار گیری المنت ها را به صورت زیر تعیین کرد (البته ترتیب قرار گیری این المنت ها در اچ تی ام ال نیز مشابه ترتیب تعیین شده در دستور زیر است) (طبعا دستور زیر فقط در کروم و سافاری که موتور وبکیت دارند، کار می کند).

.header {-webkit-order: 1;}
.content {-webkit-order: 2;}
.primary {-webkit-order: 3;}
.secondary {-webkit-order: 4;}
.footer {-webkit-order: 5;}

تا اینجا وضعیت سایت هیچ تغییری نکرده و مانند ابتدای کار است:

احتمالا تا الان به این نتیجه رسیده اید که فلکس باکس دستوری بیهوده و به درد نخور است. زیرا دستورات فعلی تغییر هیجان انگیزی ایجاد نکرده اند. حالا زمان آن فرا رسیده تا ببینیم با استفاده از فلکس باکس چگونه می توان همه چیز را تغییر داد و آن هم خیلی راحت!

به صورت پیش فرض مرورگر div ها را در یک ستون نمایش می دهد (مثل اینکه دستور
flex-direction:column را بدهیم). این روش نمایش برای یک موبایل (که عرض کمی دارد) مناسب است، اما اگر بخواهید طرز نمایش را برای نمایشگری که عرض بیشتری دارد کمی تغییر بدهید چطور؟ مثلا اگر عرض نمایشگر از 48em بیشتر شود آیا دوست ندارید، قسمتی از سایت دو ستونه شود؟ مثلا primary sidebar و main content در کنار هم قرار گیرند. حتی شاید دلتان بخواهد ترتیب هم کمی تغییر کند و ابتدا primary sidebar در سمت چپ بیاید و سپس main content در سمت راست. پس دستورات زیر را می نویسیم:

@media screen and (min-width: 48em) {
    .content {
        width: 67%;
        -webkit-order: 3;
    }                     
    .primary {
        width: 33%;
        -webkit-order: 2;
    }
}

ببینید این تغییر چقدر آسان ایجاد شد. فقط کافی است عرض را تعیین کنید و بقیه کارها توسط فلکس باکس انجام می شود.

تغییرات آنقدر ساده انجام شده اند که احتمالا متوجه بعضی از قسمت هایش نشده اید. به عکس بالا نگاه کنید. ارتفاع primary sidebar و main content یکسان است. ما کاری برای هم اندازه کردن این دو ارتفاع نکرده ایم. امتحان کنید. با اضافه و کم کردن محتوای داخل main content ارتفاع primary sidebar به همان میزان تغییر می کند. ستون ها همیشه ارتفاع یکسانی دارند و این به لطف فلکس باکس است. (اگر یک سی اس اس نویس حرفه ای باشید حتما به مشکل هم اندازه نگه داشتن ستون ها برخورده اید.)

با دستورات بعدی تغییرات بیشتری می دهیم و به خاطر داشته باشید، ارتفاع ها همیشه یکسان هستند و مهم نیست المنت ها در اچ تی ام ال چه ترتیبی داشته باشند.

بیایید زمانی که اندازه نمایشگر بزرگتر باشد، یک sidebar دیگر اضافه کنیم و سه ستون ایجاد کنیم. علاوه بر این بیایید primary sidebar را به سمت راست در کنار secondary sidebar بیاوریم.

@media screen and (min-width: 60em) {
    .content {
        width: 50%;
        -webkit-order: 2;
        order: 2;
    }
    .primary {
        -webkit-order: 4;
        order: 4;
    }
    .secondary {
        -webkit-order: 3;
        order: 3;
    }
    .sidebar {
        width: 25%;
    }
}

می بینید که دستورات بسیار ساده اند. ما عرض flex-item ها و ترتیب آنها را تعیین کردیم و تمام. بقیه کارها توسط فلکس باکس انجام شد. در اینجا می توانید نتیجه کار را ببینید. لطفا اندازه مرورگر را تغییر دهید تا حالت های تک، دو یا سه ستونه را ببینید.

توضیح: (@media screen and (min-width: 60em به معنی این است که این دستورات را هنگامی که سایت در یک نمایشگر (screen) دیده می شوند و اندازه آن حداقل ۶۰ ام است (min-width:60em یعنی عرض نمایشگر بزرگتر مساوی ۶۰ ام باشد)، اعمال کن.

امیدوارم از توانایی های این دستور لذت برده باشید. هنوز چند دستور دیگر در این مورد باقی ماند که در قسمت بعد به آنها می پردازیم.