آموزش کامل فلکس باکس flex box

آموزش فلکس باکس در css یکی از مهم ترین تکنیک هایی است که در طراحی وب با html و css باید بلد باشید شما با استفاده از flex box در css براحتی میتوانید چیدمان المان های صفحه را به بهترین شکل انجام دهید بدون اینکه نیاز به استفاده از خصوصیت هایی مثل float و position و… داشته باشید. در این پست فیلم آموزش فلکس باکس و نحوه استفاده از آن را بصورت کاملا رایگان یادمیگیرید.(این ویدیو بخشی از دوره آموزش html و css میباشد)

آموزش فلکس باکس بخش دوم

تعریف فلکس باکس

پیش از پرداختن به آموزش فلکس باکس بد نیست کمی در مورد این ماژول صحبت کنیم. flexbox یک ماژول است که برای لایه بندی صفحات وب در css استفاده می شود. این قابلیت امکان طراحی لی اوت صفحات را به صورت پویا و انعطاف پذیر فراهم می کند. با کمک فلکس باکس شما می توانید صفحاتتان را به صورت ریسپانسیو بسازید. امروزه کار با این ماژول خیلی رایج شده است تا جایی که یکی از الزامات برنامه نویسی برای هر طراح وبسایت است. یکی از دلایلی که اهمیت یادگیری این ماژول را نشان می دهد این است که در فریم ورکهای جدید مثلا بوت استرپ4، از فلکس باکس استفاده شده است و به نحوی می توان گفت پیش نیاز یادگیری این فریم ورک است.

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

<style>

img{
float:right;
}

</style>

همین کد با دستور position به فرم زیر نوشته می شد:

<style>

img{
position:absolute;
right:10px;
}

</style>

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

آموزش flexbox در css

آموزش flexbox در css یکی از مباحث کاربردی است، با کمک flexbox شما قادر خواهید بود صفحات خود را بدون درگیر شدن با مشکلاتی نظیر float یا whitespace براحتی طراحی کنید. مزیت صفحه آرایی با فلکس باکس این است که صفحات بصورت ریسپانسیو خواهند بود. از جمله امکاناتی که flexbox در اختیار توسعه دهندگان قرار می دهد می توان به این موارد اشاره کرد:

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

برای شروع کار آموزش فلکس باکس در css ابتدا به معرفی عناصر اصلی فلکس باکس می پردازیم. اولین عنصر نگهدارنده یا container است. منظور از نگهدارنده همان گرید مادر است. سایر آیتم های فرزند یا flex-item ها داخل این گرید قرار می گیرند. مطابق شکل زیر:

معمولا ویژگی ها بصورت سلسله مراتبی به این عناصر داده می شود و بیشتر ویژگی ها برای عنصر container تنظیم می شود. نحوه تعریف این دو عنصر به صورت زیر است:

.flex-container
{
display : flex;
}
.flex-container
{
flex-direction: row;
}

در قسمت display در کد اول، می توان از inline-flex به جای flex استفاده کرد در اینصورت نگهدارنده یا container  به فرم inline نشان داده میشود. تنظیم نحوه چیدمان با دستور flex-direction انجام می شود. می توان حالت افقی (row) یا عمودی (column) را انتخاب کنیم. همجنین می توان چیدمان را عمودی وارونه row-reverse یا افقی وارونه column-reverse نیز تنظیم کرد. نحوه قرار گرفتن عناصر در این ردیف ها یا ستون نیز به دو صورت rtl یعنی از راست به چپ یا ltr یعنی از چپ به راست انجام می شود.

حال در نظر بگیرید که عناصر شما از سایز container بیشتر باشد در این حالت به سه صورت می توان عناصر را جایگذاری کرد. این ویژگی flex-wrap نام دارد:

• حالت wrap : عناصر به ردیف بعدی هدایت می شوند.
• حالت nowrap : عناصر در ابعاد کوچکتر در همان ردیف اضافه شوند.
• حالت wrap-reverse : برعکس حالت اول است یعنی عناصر اضافه در همان ردیف می مانند و عناصر داخل ردیف به ردیف بعدی منتقل می شوند.

نحوه نوشتن این ویژگی در کد بصورت زیر است. دقت کنید که این ویژگی برای نگهدارنده تعریف می شود.

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

میتوان حالتی تعریف کرد که دو ویژگی بالا بصورت کوتاه شده در یک ویژگی تحت عنوان flex-flow قرار گیرد. بطور مثال:

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

آشنایی با محورها در flexbox 

در قسمت بعدی از آموزش flexbox به نحوه تنظیم محورها می پردازیم. به دو تصویر زیر به دقت نگاه کنید.

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

ترازبندی عناصر نسبت به main axis

مبحث دیگر در آموزش flexbox نحوه هم ترازسازی عناصر است. با کمک یک ویژگی به نام justify-content می توانید عناصر داخلی یک نگهدارنده را نسبت به main axis ترازیندی کنید. این ترازبندی می تواند چندین حالت مختلف داشته باشد. در تصویر زیر این حالت ها نمایش داده شده است.

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

.flex-container
{
justify-content: space-around;
}

ترازبندی عناصر نسبت به محور cross axis

مطابق محور اصلی می توان ترازبندی را براساس محور عمودی نیز انجام داد. برای اینکار از ویژگی align-item استفاده می کنیم. در شکل زیر انواع ترازبندی عمودی را مشاهده می کنید.

کد زیر نمونه ای از این نوع ترازبندی است:

.flex-container
{
align-items: stretch;
}

ترازبندی عناصر اضافه نسبت به cross axis

در صورتی که عناصر ما در بیش از یک ردیف قرار داشتند نیز می توان آنها را نسبت به محور عمود تراز بندی کرد. این قابلیت با استفاده از ویژگی align-content انجام می شود. به شکل های زیر دقت کنید.

نحوه استفاده از آن در کد css بصورت زیر است:

.flex-container
{
align-content: space-around;
}

تغییر چینش آیتم های داخلی

تغییر نحوه چینش عناصر داخلی یکی دیگر از مباحث آموزش فلکس باکس است که در ادامه به آن می پردازیم. اولین ویژگی order است. با کمک این ویژگی، می توان ترتیب نمایش عناصر را تغییر داد بگونه ای که تغییری در ساختار html ایجاد نشود. مقداری که برای این ویژگی تنظیم می شود یک عدد صحیح است. مقدار پیشفرض برای تمامی عناصر 0 است. بزرگترین عدد نشانگر آخرین عنصر در ترتیب است (عناصر از چپ به راست در نظر گرفته می شوند). به تصویر زیر با دقت نگاه کنید.

.second
{
order: 1;
}

در این مثال ما قصد داریم دومین عنصر در ترتیب تعریف شده در html (عنصر second) را از سمت چپ در اولین خانه قرار دهیم. به همین خاطر مقدار یک را برای آن مشخص می کنیم.

بسط دادن عناصر داخلی

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

flex-grow در css

این ویژگی درصد رشد یک عنصر نسبت به سایر عناصر را برحسب درصد نشان می دهد. مثلا در صورتیکه تمامی عناصر مقدار برابر یک داشته باشند فضای موجود بین تمامی عناصر داخلی بصورت برابر تقسیم می شود. اما عدد دو برای یک عنصر باعث می شود که دو برابر سایر عناصر فضا اشغال کند.

به عنوان مثال :

.first
{
flex-grow: 1;
}
.second
{
flex-grow: 2;
}
.third
{
flex-grow: 1;
}

Flex basis در css

یک قابلیت دیگر در flexbox ویژگی Flex basis در css است که برای تعیین ارتفاع یا عرض عناصر داخلی براساس جهت نگهدارنده استفاده می شود. یعنی در صورتیکه جهت نگهدارنده افقی (row) باشد، عناصر به اندازه تعیین شده از عرض فضا می گیرند و در صورتیکه نگهدارنده عمودی (column) باشد عناصر از ارتفاع فضا می گیرند. توجه داشته باشید این مقدار ثابت است و مانند flex grow بصورت درصدی تغییر نمی کند. در صورتیکه هر دو ویژگی همزمان استفاده شود ابتدا به اندازه مقادیر shrink به عناصر فضا داده می شود و سپس هر میزان فضایی که از نگهدارنده باقی ماند براساس grow میان عناصر تقسیم می شود.

.first
{
flex-grow: 1;
flex-basis: 200px;
}
.second
{
flex-grow: 2;
flex-basis: 300px;
}
.third
{
flex-grow: 1;
flex-basis: 250px;
}

در این مثال مقادیر 200px.300px و 250px به ترتیب به عناصر تخصیص داده می شود. پس از آن این مقدار از 950px که عرض کلی نگهدارنده است کم شده و حاصل آن یعنی 200px براساس میزان تعیین شده برای flex grow به عناصر داده می شود. یعنی به عنصر اول و سوم مقدار 50px و به عنصر دوم دو برابر آن یعنی 100px فضا اختصاص داده می شود.

Flex shrink در css

آخرین دستور مربوط به منعطف سازی flexbox، دستور Flex shrink در css است. این دستور کاربرد زیادی ندارد و زمانی استفاده می شود که مجموع اندازه عناصر داخلی یک ردیف بیش از اندازه نگهدارنده بشود و به اصطلاح سرریز رخ دهد. در صورت بروز چنین مشکلی باید اندکی از فضای عناصر داخلی را کم کنیم تا این مسئله حل شود. به مثال زیر توجه کنید:

.first
{
flex-grow: 1;
flex-basis: 400px;
flex-shrink: 1;
}
.second
{
flex-grow: 2;
flex-basis: 600px;
flex-shrink: 3;
}
.third
{
flex-grow: 1;
flex-basis: 400px;
flex-shrink: 2;
}

اگر مجموع عناصر بالا را محاسبه کنید برابر 1400px است حال تصور کنیم که اندازه نگهدارنده 1100px باشد و ما 300px سرریز داشته باشیم. با توجه به مقادیر تعیین شده از عنصر اول به اندازه یک ششم فضای اشغالی آن یعنی 50px باید کاهش دهیم از عنصر دوم به اندازه 3/6 یعنی 150px باید کم کنیم و از سومین عنصر به اندازه 2/6 یعنی 100px باید کم شود. که مجموع این سه برابر 300px خواهد شد. با کمک سه دستور flex-grow ، flex basis و flex shrink در css شما قادرید تمامی عناصر داخلی خود را به طور متناسب تغییر اندازه دهید و مقادیر دلخواه خود را تنظیم کنید.

ترازبندی یک عنصر 

آخرین مبحثی که قصد داریم در آموزش فلکس باکس به آن بپردازیم ویژگی align-self است . به کمک این ویژگی شما می توانید عناصر داخلی خود را ترازبندی کنید. بعنوان مثال:

.flex-container
{
align-items: flex-start;
}

.second
{
align-self: flex-end;
}

که نتیجه خروجی کار به صورت زیر می شود.

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

در شکل زیر پشتیبانی نسخه های مختلف مرورگرهای گوناگون از ماژول flexbox را ملاحظه می کنید. برای نسخه هایی که این ماژول را پشتیبانی نمی کنند می توان از flecibility یاflexiejs استفاده کرد.

صفحه واکنش گرا با استفاده از flex در css

flex در css را به اندازه کافی در بخش های قبلی شناخته اید و حالا قصد داریم به کمک FlexBox یک صفحه ساده و واکنشگرا ایجاد کنیم.

کد HTML:

<div class="container">
<div class="item item1 header">header</div>
<div class="item item2 aside aside1">aside1</div>
<div class="item item3 main">main</div>
<div class="item item4 aside aside2">aside2</div>
<div class="item item5 footer">footer</div>
</div>

کد CSS:

.container {
margin: 10px;
padding: 10px;
min-height: 150px;
background-color: #a13647;
/* Flexbox */
display: flex;
flex-flow: row wrap;
}
.container .item {
background-color: #d84a43;
color: #fff;
margin: 10px;
padding: 10px;
min-height: 50px;
}
.item {
flex: 1; /*flex-grow: 1;*/
}
.item.header {
flex: 100%; /*flex-basis: 100%;*/
}
.item.aside {
flex: 0 200px; /*flex-grow: 0; flex-basis: 200px;*/
height: 150px;
}
.item.main {
flex: 1 auto; /*flex-grow: 1; flex-basis: auto ;*/
}
.item.footer {
flex: 100%;
}
@media screen and (max-width: 950px) {
.item.header {
order: 1;
}
.item.aside {
flex: 1 auto;
}
.item.aside.aside1 {
order: 3;
}
.item.aside.aside2 {
order: 4;
}
.item.main {
order: 2;
flex: 1 100%;
}
.item.footer {
order: 5;
}
}
@media screen and (max-width: 600px) {
.item.aside {
flex: 100%; /* flex-basis: 100%; as min-width: 100%;*/
}
}

برای اینکه موضوع آموزش flex در css را تکمیل کنیم کدهای مورد نیاز برای ایجاد یک صفحه واکنش گرا را قرار دادیم و حالا میتوانید خروجی آن را در زیر میتوانید مشاهده کنید.

آموزش فلکس باکس پایانی

آموزش فلکس باکس به پایان رسید امیدوارم با مطالعه این مقاله درک درستی از آموزش flex در css و صفحه آرایی با فلکس باکس پیدا کرده باشید و بتوانید خیلی راحت تر و لذت بخش تر گذشته در طراحی صفحات وب از آن استفاده کنید. اگر سوال یا ابهامی در رابطه با صفحه آرایی با flex box دارید حتما در بخش کامنت ها بپرسید با افتخار پاسخگوی سوالات شما همراهان همیشگی وبسافت3 هستم