معرفی Flexbox در CSS

در این مقاله به Flexbox و کاربرد آن نگاهی خواهیم انداخت. امروزه تعریف بهتری از طراحی ریسپانسیو داریم. یک ماژول لایه‌بندی جدید CSS به نام Flexible Box (یا Flexbox) وجود دارد که مرورگرهای زیادی از آن پشتیبانی می‌کنند.

معرفی Flexbox

در اینجا یک مرور کلی از ابر قدرت Flexbox وجود دارد:

می‌تواند به راحتی محتویات مرکزی را به صورت عمودی قرار دهد.

می‌تواند ترتیب بصری عناصر را تغییر دهد.

می‌تواند به صورت خودکار فضا و هم‌ترازی عناصر موجود در یک باکس را مشخص کند و به طور خودکار فضای موجود بین آن‌ها را اختصاص دهد.

مسیر ناهموار برای Flexbox

Flexbox قبل از رسیدن به نسخه نسبتا پایداری که امروز داریم، دچار تغییرات و چندین بازنویسی شده است. مثلا تغییرات در نسخه 2009 (http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/)، نسخه 2011 (http://www.w3.org/TR/2011/WD-css3-flexbox-20111129/) و نسخه 2014 را در نظر بگیرید. تفاوت‌های موجود در سینتکس‌ها را مشاهده کنید.

این ویژگی‌های متفاوت به این معناست که سه نسخه اجرایی بزرگ وجود دارد. شما چه تعداد از آن‌ها را نیاز دارید؟ این مسأله بستگی به سطح پشتیبانی مرورگر شما دارد.

پشتیبانی مرورگر از Flexbox

در اینترنت اکسپلورر 9، 8 و پایین‌تر هیچ پشتیبانی برای Flexbox وجود ندارد.

جز این مورد تمام مرورگرهای دیگر از Flexbox پشتیبانی می‌کنند (و تقریبا تمام مرورگرهای تلفن همراه).

حالا اجازه دهید به یکی از کاربردهای آن نگاهی بیندازیم.

تغییر ترتیب عناصر

از زمان ظهور CSS، فقط یک راه برای تعویض ترتیب عناصر HTML در صفحه وب وجود داشت که توسط display برای عناصر موجود در مجموعه‌ انجام می‌شد، مثلا گذاشتن table و سپس تغییر ویژگی display بر روی آیتم‌های داخلی آن؛ display: table-caption (آن را در قسمت بالا قرار می‌دهد)، display: table-footer-group (آن را به قسمت پایین می‌فرستد) و display: table-header-group (آن را فقط زیر مجموعه آیتم های display: table-caption می‌برد).

با این حال، Flexbox تغییر ترتیب عناصر را به صورت درونی دارد. بیایید نگاهی به نحوه کار آن بیندازیم.

این markup را در نظر بگیرید:

    I am content in the Header.

    I am content in the SideOne.

    I am content in the Content.

    I am content in the SideTwo.

    I am content in the Footer.

می‌توانید در اینجا مشاهده کنید که آیتم سوم دارای یک کلاس HTML از FlexContent است. تصور کنید این div قصد دارد محتوای اصلی را برای صفحه نگه دارد.

بسیار خوب، بیایید همه چیز را ساده نگه داریم. ما برخی رنگ‌های ساده را اضافه می‌کنیم تا تفکیک بخش‌ها ساده‌تر شود و این آیتم‌ها را یکی زیر دیگری به ترتیبی که در markup نشان داده شده است ایجاد می‌کنیم.

.FlexWrapper {

    background-color: indigo;

    display: flex;

    flex-direction: column;

}

 

.FlexItems {

    display: flex;

    align-items: center;

    min-height: 6.25rem;

    padding: 1rem;

}

 

.FlexHeader {

    background-color: #105B63;   

}

 

.FlexContent {

    background-color: #FFFAD5;

}

 

.FlexSideOne {

    background-color: #FFD34E;

}

 

.FlexSideTwo {

    background-color: #DB9E36;

}

 

.FlexFooter {

    background-color: #BD4932;

}

در مرورگر چیزی شبیه تصویر زیر ایجاد می‌شود:

حالا، فرض کنید می‌خواهیم مکان FlexContent را با اولین آیتم، بدون دست زدن به markup، تغییر دهیم. این کار با Flexbox آسان است، فقط با افزودن یک ویژگی و مقداری برای آن انجام می‌شود.

.FlexContent {

    background-color: #FFFAD5;

    order: -1;

}

ویژگی order به ما اجازه می‌دهد ترتیب آیتم‌ها را در Flexbox به سادگی اصلاح کنیم. در این مثال، مقدار 1- به این معناست که می‌خواهیم این آیتم قبل از همه آیتم‌ها نمایش داده شود.

اگر می‌خواهید آیتم‌ها را کاملا تغییر دهید، توصیه می‌کنیم اعلان‌های بیشتری را وارد کنید و شماره order را برای هر کدام قرار دهید. این کار باعث می‌شود تا کارها کمی ساده‌تر شوند تا وقتی می‌خواهید آن‌ها را با کوئری‌های رسانه‌‌ای ترکیب کنید بهتر درک شوند.

بیایید تغییر ترتیب عناصر خود را با برخی کوئری‌های رسانه‌ای ترکیب کنیم تا فقط یک لایه‌بندی متفاوت در سایز متفاوت تولید نکنیم بلکه ترتیب‌های متفاوتی ایجاد کنیم.

بیایید همان سند اولیه خود را اینگونه تغییر دهیم:

    I am content in the Content.

    I am content in the SideOne.

    I am content in the SideTwo.

    I am content in the Header.

    I am content in the Footer.

ابتدا محتوای صفحه، سپس دو قسمت کناری، بعد هدر و در نهایت فوتر صفحه را قرار می‌دهیم. همان‌طور که از Flexbox استفاده می‌کنیم، می‌توانیم HTML را در ترتیبی که برای سند مناسب است، بدون توجه به نحوه قرارگیری عناصر از نظر بصری، سازماندهی کنیم.

برای صفحه نمایش‌های کوچک‌تر، این ترتیب را قرار می‌دهیم:

.FlexHeader {

    background-color: #105B63;

    order: 1;

}

 

.FlexContent {

    background-color: #FFFAD5;

    order: 2;

}

 

.FlexSideOne {

    background-color: #FFD34E;

    order: 3;

}

 

.FlexSideTwo {

    background-color: #DB9E36;

    order: 4;

}

 

.FlexFooter {

    background-color: #BD4932;

    order: 5;

}

تصویر زیر را در مرورگر خواهید دید:

و سپس، در یک breakpoint، آن را اینگونه تغییر می‌دهیم:

@media (min-width: 30rem) {

    .FlexWrapper {

        flex-flow: row wrap;

    }

    .FlexHeader {

        width: 100%;

    }

    .FlexContent {

        flex: 1;

        order: 3;

    }

    .FlexSideOne {

        width: 150px;

        order: 2;

    }

    .FlexSideTwo {

        width: 150px;

        order: 4;

    }

    .FlexFooter {

        width: 100%;

    }

}

نتیجه‌ای همانند تصویر زیر را خواهیم داشت:

در این مثال از ویژگی کوتاه‌شده flex-flow: row wrap استفاده شده است که اجازه می‌دهد آیتم‌ها به خط بعد بروند.

نتیجه‌گیری

برای طراحی ریسپانسیو می‌توان از ویژگی‌های Flexbox به خوبی و آسانی استفاده کرد. اگر پیش از این چیزی را با Flexbox نساخته‌اید، ممکن است همه ویژگی‌ها و مقادیر جدید کمی عجیب به نظر برسد و مشاهده می‌کنید که با این روش می‌توانید به راحتی لایه‌بندی‌هایی که قبلا با کار زیادی آن‌ها را ایجاد می‌کردید را به آسانی بسازید.