طراحی صفحه وب با فلکس باکس

مفهوم فلکس باکس (Flex Box) یا Flexible Box یک مدل برای لایه بندی صفحات وب در طراحی سایت می باشد که به شما کمک میکند بدون استفاده از float و یا  positioning  به طراحی صفحات انعطاف پذیر و در نهایت واکنشگرا بپردازید.فلکس باکس یک زبان جداگانه نیست و زیر مجموعه ای از css است.بنابراین نیازی به دانلود کردن هیچ چیز اضافه ای نیست و به کمک همان سی اس اسی که دارید می توانید از فلکس باکس برای طراحی تان استفاده کنید.
اگر با لایه بندی صفحات  آشنا باشید حتما با ایرادات موجود در ویژگی  float که به کمک خاصیت  clear fix حل می شود مواجه شده اید.

فلوت و فلکس باکس چه فرقی باهم دارند؟

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

اما در عکس سمت راست که فلکس باکس را نشان میدهد المان ها همگی به صفحه چسبده اندو حالت شناور ندارند ولی ما می تواینم به راحتی آن ها را جا به جا کنیم .

چرا باید سایت واکنشگرا طراحی کنیم؟

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

چگونه از فلکس باکس استفاده کنیم؟

فلکس باکس از دو قسمت کلی تشکیل شده است.همانند عکس زیر , یک قسمت از flex container که همان مخزنی است که آیتم های آن به صورت فلکس قرار می گیرد و یک قسمت آیتم های آن که به صورت فلکسیبل هستند.

کد مربوط به عکس بالا در html به صورت زیر خواهد بود:

 <div class=&quotflex-container&quot>
<div> Item1</div>
<div> Item2</div>
<div> Item3</div>
<div> Item4</div>
</div>

برای فلکسیبل کردن آیتم ها در css می نویسیم:

.flex-container {display: flex;}

فلکس باکس چه ویژگی هایی دارد؟

فلکس باکس 5تا ویژگی مهم دارد که با هم به بررسی آن ها می پردازیم:

• خاصیت دایرکشن:دایرکشن به معنی جهت می باشد ما با کمک فلکس باکس می توانیم آیتم هایی که در صفحه داریم را سازمان بندی کنیم.اگر بخواهیم آیتم هایمان را به صورت ردیفی یا ستونی بگذاریم می نویسیم:

.flex-container {
flex-direction: row / culomn / row-revers / culomn-revers;
}

• خاصیت اوردر(order):گاهی اوقات ما می خواهیم به المان مان این الویت را بدهیم که اول نمایش داده بشود برای اینکه این دستور اعمال شود از order استفاده می کنیم.به المان مورد نظرمان همانند تصویر زیر دستور می دهیم تا در کدام جایگاه نمایش داده بشود.

• خاصیت wrap:به کمک این ویژگی می توان اجزا در صفحه را بسته بندی کرد. مثلا یک تکست در یک خط باشد یا در دو دو خط قرار بگیرد.در مثال زیر بسته بندی شدن آیتم ها را مشاهده می کنید.

برای بر طرف کردن مشکل به وجود آمده در سمت چپ در کدهای css به صورت زیر عمل میکنیم

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

• خاصیت alinging:در css برای اینکه یک جمله را به وسط صفحه بیاوریم از text-aling:center استفاده می کردیم یا برای وسط قرار دادن یا چپ و راست قرار دادن المان از فلوت رایت یا لف یا سنتر استفاده میکردیم اما با مشکلاتی مواجه می شدیم مثل clear fix و از این قبیل مشکلات .برای رهایی از این دردسر ها در فلکس باکس از خاصیت های تراز کردن یا alinging استفاده می کنیم.در زیر نحوه کد نویسی و نتیجه حاصل آن را مشاهده می کنیم.

.flex-container{
display: flex;
justify-content: center/ flex-start / flex-end / space-between / space-around
}

این جابه جایی در justify-content به صورت افقی است .برای جا به جایی به صورت عمودی از aling-item استفاده میشود. نتایج در تصویر زیر آورده شده است.

.flex-container{
aling-item: center / flex-start / flex-end /stretch
}

اگه بخواهیم فقط یکی از این آیتم ها را بالا پاین کنیم چه کار باید بکنیم ؟

خاصیت aling-selfبه ما این امکان را می دهد تا المان به صورت مجزا از باقی المان ها جا به جا شود.به تصویر زیر دقت کنید.

.item3{ 
aling-self: center / flex-start / flex-end /stretch/baseline ;
 }

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

.flex-container{ 
flex-direction: culomn;
}
.item3{  
aling-self: center / flex-start / flex-end /stretch/baseline ;  
}

• خاصیت flex-grow: با این خاصیت می توانیم سایز آیتم ها را افزایش یا کاهش بدهیم.برای تغییر دادن اندازه هر کدام از المان ها میتوانیم از flex-grow استفاده کنیم. به تصاویر زیر دقت کنید.

آیتم هایی که در کانتینر یعنی همان باکس بنفش به صورت فلکس قرار گرفته اند.به صورت دیفالت اندازه ای برابر با ایتم 1و3و4 دارند اما در آیتم 2 این اندازه بزرگ تر است در واقع با نوشتن کد زیر آیتم 2 اندازه اش مقداری می شود تا قسمت باقی مانده کانتینر را در بر بگیرد

.item2{
flex-grow: 2;
}

در تصویر بالا قسمت اول حالت دیفالت نشان داده شده است وقتی مقدار 1 را به flex-growبدهیم تمامی آیتم ها به یک اندازه کل container را پر میکنند.حالا اگر به صرفا یکی از آیتم ها مقدار بیشتر از 1 بدهیم این آیتم متناسب با عددی که برای آن لحاظ شده است اصطلاحا کش (stretch) پیدا میکند.این مقدار نه پیکسل است نه em نه vh و نه واحد اندازه گیری دیگری .بلکه فقط یک میزان تناسب است.که به درستی در تصویر نشان داده شده است.برای درک بهتر در تصویر زیر مقدار 3 به flex-grow داده شده است.

همانطور که مشاهده کردید فلکس باکس راه حل های خیلی ساده تری را برای طراحی سایت ارائه داده است.و در این مقاله سعی شد مهم ترین ویژگی های آن گفته شود.یادگیری فلکس باکس اصلا سخت نیست و بسیار به شما برای طراحی و به خصوص ریسپانیو کردن صفحه وب تان کمک می کند بنابراین سعی کنید در یادگیری مطالب مربوط به فلکس باکس کوشا باشید.