5 تکنیک Flexbox که باید بدانید!

بخش: توسعه وب 116 بار مشاهده شده سه شنبه ۴ مهر ۹۶ 0 نظر ارسال شده
5 تکنیک Flexbox که باید بدانید!

Flexbox یک استاندارد CSS برای طراحی رابط کاربری است. با استفاده از خاصیت های مختلف flexbox می توانیم صفحه را از بلوک های building کوچک بسازیم، که پس از آن به راحتی و از هر راهی قادر به تغییر موقعیت و اندازه هستیم. وب سایت ها و برنامه های ساخته شده به این شیوه responsive هستند و به خوبی برای تمام اندازه های صفحه نمایش سازگار می باشند.

 در این مقاله قصد داریم نگاهی به پنج رویکرد flexbox برای حل مشکلات طرح کلی CSS بیاندازیم. همچنین نمونه های عملی را برای نمایش سناریوهای زندگی واقعی که در آن این تکنیک ها اعمال می شود، ارائه می کنیم. 

 

1. ایجاد ستون با ارتفاع برابر

 این کار ممکن است در ابتدا دشوار به نظر نرسد، اما ایجاد ستون هایی با همان ارتفاع می تواند واقعا آزار دهنده باشد و به سادگی تنظیم ارتفاع منفی کار نخواهد کرد، زیرا هنگامی که میزان محتوای ستون ها متفاوت می شود، برخی از آنها رشد خواهند کرد و بقیه کوتاهتر می شوند. 

رفع این مسئله با استفاده از flexbox آسان تر نمی شود، زیرا ستون هایی که در این روش ساخته شده اند، به طور پیش فرض دارای ارتفاع برابر هستند. همه باید ابتدا مدل انعطاف پذیری را اولویت بندی کنیم، سپس اطمینان حاصل نماییم که خاصیت های flex-direction و align-items دارای مقدار پیش فرضشان هستند.

CSS

.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 */
}

HTML

<div class="container">

    <!-- Equal height columns -->

    <div>...</div>
    <div>...</div>
    <div>...</div>

</div>

 نمونه ای از یک اسلایدر عمودی رو میتونید توی این تصویر مشاهده کنید.

equal-height-sidebar

 

2. المان های تنظیم مجدد

 چند دقیقه پیش، اگر مجبور بودیم نظم برخی از المان ها را به صورت پویا تغییر دهیم، احتمالا برخی از CSS هک را امتحان می کردیم، برخی از  رها سازی ها و خنثی سازی ها و به انجام کار با JavaScript می پردازیم. با این حال، با استفاده از flexbox، این امر به کاربرد یک CSS property منجر می شود. 

این امر order نام دارد و مانند نامش همه چیز رو به جلو و مستقیم است. order اجازه مبادله هر تعداد از موارد انعطاف پذیر و تغییر دنباله ای که در آن بر روی صفحه نمایش ظاهر می شود را می دهد. پارامترش تنها یک عدد صحیح است که موقعیت آن المان را تعیین می کند و تعداد کمتر به معنای اولویت بزرگتر است.

CSS

.container{
    display: flex;
}

/* Reverse the order of elements */

.blue{
    order: 3;
}

.red{
    order: 2;
}

.green{
    order: 1;
}

HTML

<div class="container">

    <!-- These items will appear in reverse order -->

    <div class="blue">...</div>
    <div class="red">...</div>
    <div class="green">...</div>

</div>

نمونه ای از بخش نظرات که با FlexBox بصورت Responsive طراحی شده است.

reorder

 

3. مرکز افقی و عمودی

 Vertical centering (مرکز عمودی) در CSS یکی از آن مشکلات است چطور چنین مورد بی اهمیتی هنوز به این اندازه پیچیده است؟ اگر vertical centering CSS  را گوگل کنید، یک مقدار نامحدود از تکنیک های مختلف ظاهر می شود و بسیاری از آنها شامل جداول و یا تبدیل یا مواردی هستند که برای ساخت پوسته طراحی نشده اند. 

Flexbox راه حل ساده ای برای مشکل ارائه می دهد. هر flex layout دارای دو جهت (محور X و Y محور) و دو خاصیت جداگانه برای alignment (تراز) آنها است. با مرکز هر دو می توانیم هر المان را در وسط کانتینر اصلی آن قرار دهیم.   

CSS

.container{
    display: flex;

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

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

HTML

<div class="container">

    <!-- Any element placed here will be centered
         both horizonally and vertically -->

    <div>...</div>

</div>
نمونه ای از قرارگیری کادر متنی در وسط صفحه بصورت افقی و عمودی.
vertical align screen
 
 
 

4. ایجاد شبکه های کاملا رسپانسیو 

در هنگام ایجاد شبکه های Responsive، اکثر توسعه دهندگان بر چارچوب CSS تکیه می کنند. بوت استرپ محبوب ترین است اما صدها کتابخانه وجود دارد که می توانند به شما در انجام این کار کمک کنند. آنها معمولا به خوبی کار می کنند و دارای گزینه های زیادی هستند اما تمایل به سنگین شدن دارند. اگر شما یک شخص DIY هستید یا نمی خواهید چارچوب کل را فقط برای شبکه بسازید، Flexbox شما را پوشش می دهد!

یک سطر در شبکه flexbox به سادگی container با display:flex است. ستون های افقی داخل آن می تواند هر مقدار المانی باشد که حجم آنها توسط flex تنظیم می شود. مدل انعطاف پذیر به اندازه نمایشگر سازگار است، بنابراین این تنظیم باید در تمام دستگاه ها به خوبی ظاهر شود. با این حال، اگر تصمیم بگیریم که فضای کافی افقی به اندازه روی صفحه نمایش نباشد، می توانیم طرح را به صورت عمودی با media-query تبدیل کنیم.

CSS

.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;     
    }
}

HTML

 

<div class="container">

    <!-- This column will be 25% wide -->
    <div class="col-1">...</div>

    <!-- This column will be 50% wide -->
    <div class="col-2">...</div>

    <!-- This column will be 25% wide -->
    <div class="col-1">...</div>

</div>

طراحی بخش Header بصورت ریسپانسیو با FlexBox.

flexbox header screen

 

5. ایجاد footer کاملا چسبنده

Flexbox یک راه حل آسان برای این مشکل است. هنگام ساخت صفحه هایی که دارای footer چسبنده هستند، با انجام دادن تمام موارد در المان های flex، می توانیم مطمئن باشیم که footer همیشه در پایین صفحه قرار می گیرد.

اعمال display: flex به تگ body به ما اجازه استفاده از خاصیت های flex mode در تمام layoutهای صفحه را می دهد. هنگامی که این کار را انجام می دهد، محتوای اصلی وب سایت می تواند یکی از flex itemها و footer باشد، که باعث می شود تا آنها واقعا موقعیت خود را دستکاری کرده و دقیقا همان جایی که می خواهند قرار بگیرند.

CSS

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;
}

HTML

<body>

    <!-- All the page content goes here  -->

    <div class="main">...</div>

    <!-- Our sticky foooter -->

    <footer>...</footer>

</body>

نمونه ای از ایجاد Footer بصورت چسبنده.

correct layout

 

نتیجه

تمام مرورگرهای اصلی (به استثنای IE 9) اکنون از حالت flex layout پشتیبانی می کنند، مگر اینکه دارای پایگاه کاربرانی باشید که مرورگرهای یکپارچه مایکروسافت را ترجیح می دهند ، مطمئن باشید که flexbox برای آن ها نیز آماده تولید است. اگر تا به حال از آن استفاده نکرده اید، ما امتحان نمودنش را به شدت توصیه می کنیم!

امیدواریم راهنمایی های CSS ما مفید واقع شود و به شما در ایجاد طرح های رسپانسیو بهتر و قوی تر کمک کند. لذت ببرید!

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

گروه تحقیقات سافت اسکیل به منظور افزایش سطح دانش جامعه، سعی در ترجمه، تالیف و تولید محتوای با کیفیت در زمینه های مختلف نرم افزاری دارد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...