Return True - 5 تکنیک flexbox که باید بدانید

5 تکنیک flexbox که باید بدانید

Frontend
CSS

Flexbox یک استاندارد CSS برای طراحی رابطه کاربری ( UI ) می باشد. با استفاده از خواص مختلف Flexbox، میتوان المان های صفحه را بدون زحمت تغییر اندازه بدیم یا جایگیری موارد مختلف رو تغییر بدیم. وبسایت ها و اپلیکیشن های ساخته شده توسط Flexbox رسپانسیو ( Responsive  ) هستند و به خوبی در تمامی صفحات ( Screen ) ها نماش داده می شوند.

در این مقاله قصد داریم به 5 ویژگی Flexbox برای حل مشکلات عمومی CSS در طراحی قالب بپردازیم. 

1. ساخت ستون هایی با ارتفاع یکسان

این مورد در ابتدا چندان سخت به نظر نمی رسد. ولی ساخت ستون هایی با ارتفاع یکسان واقعا میتونه شمارو دچار مشکل کنه. راحت ترین شروع قرار دادن min-height در CSS هست اما متاسفانه کاربردی نیست! همینکه یکی از ستون ها محتوایی بیشتر از سایر ستون ها داشته باشد، بلندتر از سایر ستون ها نمایش داده میشه.

با استفاده از Flexbox انجام این کار با استایل زیر قابل اجراست:

.container {
    /* Initialize the flex model */
    display: flex;

    /* These are the default values but you can set them anyway */
    flex-direction: row;    /* Items inside the container will be positioned horizontally */
    align-items: stretch;   /* Items inside the container will take up it's entire height */
}

مشاهده دمو

2.مرتب سازی عناصر درون صفحه

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

اسم این ویژگی order  هست. ویژگی order به ما این قابلیت رو میده تا المان های صفحه رو مرتب سازی کنیم ( بدون توجه به اینکه ترتیب نوشتنشون توی صفحه به چه شکلی هست ). مقادیر عددی دریافت میکنه و هرچی عدد کوچیکتر باشه، جایگاه المان در صفحه جلوتر قرار میگیره.

.container{
    display: flex;
}

/* Reverse the order of elements */

.blue{
    order: 3;
}

.red{
    order: 2;
}

.green{
    order: 1;
}

 مشاهده دمو

3.وسط چین کردن افقی و عمودی

وسط چین کردن عمودی در CSS یکی از مشکلاتیست که همه یک روزی بهش میرسیم. وقتی گوگل کنیم و به دنبال راه حل باشیم، معمولا توسط tables و یا transforms توی CSS حل میشد. Flexbox یک راه حل راحت تر برای این کار داره. تمام قالب هایی با بیس Flex دارای دو جهت ( محور X و محور Y ) و دو ویژگی جداگانه برای تراز بندی هستند. با وسط چین کردن این دو، میتوان هر المانی رو وسط پرنتش قرار داد

.container{
    display: flex;

    /* Center according to the main axis */
    justify-content: center;

    /* Center according to the secondary axis */
    align-items: center;
}

مشاهده دمو 

4.ساخت گریدهای رسپانسیو

اکثر توسعه دهندگان وقتی تصمیم به ساخت گریدهای رسپانسیو می گیرند، به یکی از frameworks های موجود روی می آورند. از معروف ترین آنها میتوان به Bootstrap  اشاره کرد. اما صدها کتاب خانه دیگه برای کمک به شما برای رفع این نیاز وجود داره. اکثرا بدون مشکل کار میکنند و ویژگی های بسیاری به شما ارائه می دهند. اگر شما فقط نیاز به گریدهای رسپانسیو دارید، به شما پیشنهاد میکنم از قابلیت Flexbox برای ساخت این گریدها استفاده کنید.

ردیف ها در Flexbox به سادگی می توانند هر آیتمی با display:flex باشند. مدل های Flex با سایز های Viewport سازگار هستند پس در تمامی دستگاها به خوبی نمایش داده خواهند شد. با این حال در صورتی که فضای افقی کافی در صفحه وجود نداشته باشد، میتوان با استفاده از media-query المان ها را به شکل عمودی چید.

.container{
    display: flex;
}

/* Classes for each column size. */

.col-1{
    flex: 1;
}

.col-2{
    flex: 2;
}

@media (max-width: 800px){
    .container{
        /* Turn the horizontal layout into a vertical one. */
        flex-direction: column;     
    }
}

مشاهده دمو

5.ساخت فوتری که همیشه در انتهای صفحه باشد

در هنگام ساخت صفحات وب، گاها پیش میاد متن صفحه چندان بلند نیست و در واقع یک صفحه کامل را شامل نمی شود. در این مواقع فوتر سایت در انتهای صفحه قرار نمی گیرد و باعث نمایش بد در سایت می شود. flexbox برای این منظور راهکار ساده ای ارائه میدهد. کاری که لازم است انجام بدیم، دادن استایل display: flex به تگ body هست تا المان های داخلش رو بتونیم با ویژگی های Flex تغییر بدیم. در این حالت قسمت اصلی سایت و فوتر هر کدام یک flex item هستند. در این حالت به راحتی می توان مکان قرار گیری این دو المان رو کنترل کرد.

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

.main{
   /* The main section will take up all the available free space on the page that is not taken up by the footer. */
   flex: 1 0 auto;
}

footer{
   /* The footer will take up as much vertical space as it needs and not a pixel more. */
   flex: 0 0 auto;
}

مشاهده دمو 

نتیجه گیری

 تمامی مرورگرها ( به جز IE9 ) از Flex پشتیبانی می کنند. در صورتی که هنوز ازش استفاده نمی کنید، بشدت پیشنهاد میکنم تستش کنین. همچنین Bootstrap از نسخه 4 به بعد، قالب بندی هاش رو بر طبق Flex قرار داده.

نظرات