طراحی و صفحه آرایی با فلکس باکس ( Flexbox )

در دنیای HTML  و CSS  که نمایش محتوی را به عهده دارند همیشه یک موضوع، سختی و پیچیدگی خاص خود را داشته و آن هم صفحه آرایی است. به عنوان مثال اگر شما بخواهید یک صفحه برای نمایش یک ستونی یا دو ستونی از عکس ها را داشته باشید با مشکل چندانی رو به رو نیستید ولی برای صفحه آرایی های چند ستونه ی تو در تو قطعا با دردسرهای مختلفی مواجه خواهید شد و همچنین یکسان سازی صفحه آرایی صورت گرفته در مرورگر های مختلف کار شما را پیچیده تر می کند. اگر با صفحه آرایی امروزی آشنا باشید قطعا با مشکل Float که به وسیله تکنیک Clearfix حل می شود دست و پنجه نرم کرده اید و حتی از مشکل whitespace  که در صفحه آرایی با inline-block به وجود می آید آگاهی دارید. خبر خوب اینکه CSS3 ماژولی برای صفحه آرایی دارد که نه تنها مشکلات قبلی را کنار می زند بلکه ویژگی های بسیار چشم گیر و کاربردی را فراهم می کند. این ماژول Flexbox نام دارد.

فلکس باکس ( Flexbox ) چیست؟

فلکس باکس ( Flexbox ) مخفف  کلمه Flexible Box Module در سال 2009 به عنوان یک سیستم جدید با هدف کمک به ما در ایجاد صفحات وب و سازماندهی آسان عناصر خود معرفی شد و از آن زمان، توجهات زیادی به آن جلب شد و به نظر می رسد که اکنون به عنوان سیستم اصلی صفحه آرایی برای صفحات وب استفاده می شود.

فلکس باکس یک سیستم صفحه آرایی یک بعدی است که می توانیم از آن برای درست کردن ردیف ها یا ستون ها استفاده کنیم. فلکس باکس کار ما را برای طراحی وب و درست کردن صفحات ریسپانسیو ( واکنشگرا ) آسان کرده، بدون نیاز به استفاده کردن از ویژگی هایی مانند float و position که در CSS وجود دارد.

وقتی فلکس باکس را یک بعدی توصیف می کنیم، این واقعیت را توصیف می کنیم که فلکس باکس همزمان با طرح در یک بعد به صورت ردیف یا ستون سروکار دارد. این را می توان با مدل دو بعدی CSS Grid Layout که ستون ها و ردیف ها را با هم کنترل می کند، در تضاد قرار داد.

برخی از امکانات فلکس باکس

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

شروع کار با فلکس باکس

فلکس باکس دارای دو محور اصلی (Main Axis) و ضربدری (Cross Axis) است.

• شما محور اصلی را با خاصیت flex-direction تعریف می کنید. چهار مقدار ممکن دارد: ردیف ، ردیف معکوس ، ستون و ستون معکوس.
• محور عرضی همیشه عمود (⟂) به محور اصلی است. اگر محور اصلی دارای یک جهت ردیف یا معکوس ردیف باشد، محور عرضی در امتداد یک ستون یا جهت معکوس ستون اجرا می شود (و بالعکس).

توجه: درک محورهای CSS flexbox برای تراز کردن CSS و توجیه موارد flex در کنار آن ها ضروری است.

ظروف فلکس یا Flex containers و عنصرهای داخلی (Flex Items)

فلکس کانتینر عنصری است که خاصیت نمایش را به صورت flex یا inline-flex تنظیم می کند. سپس، همه فرزندان تبدیل به موارد فلکس می شوند. بنابراین، CSS flex container، اندازه، تراز و موقعیت فرزندان خود را تعیین و مشخص می کند.

برای تعیین یک نگهدارنده از نوع flexbox باید display را از نوع flex تعریف کنیم.

.flex-container {
  display : flex;
}

لازم به ذکر است که display مقدار دیگری هم می گیرد و آن inline-flex می باشد. کار آن شبیه flex است با این تفاوت که باعث می شود عنصر نگهدارنده خاصیت inline بگیرد.

در مرحله بعد برای اینکه عنصرهای داخلی یا فرزندها در یک ردیف در کنار هم قرار بگیرند باید ویژگی flex-direction را از نوع row تعریف کنیم.

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

ویژگی flex-direction موقعیت اقلام flex و جهتی را طی می کند که محور اصلی حرکت می کند. بر اساس جهت مشخص شده (سطر یا ستون) ، محور اصلی افقی یا عمودی است. همچنین به طور خودکار محور عرضی را تنظیم می کند، که محور عمود (⟂) به محور اصلی است.

حال اگر بخواهیم عنصرها به جای چیدمان افقی، چیدمانی عمودی داشته باشند کافی است flex-direction را از نوع column تعریف کنیم.

دو مقدار دیگری که flex-direction می گیرد row-reverse و column-reverse می باشند که باعث می شوند ترتیب قرار گرفتن عنصرها به صورت عمودی بالعکس یا افقی بالعکس نمایش داده شود. مقدار پیشفرض برای این ویژگی row است.

توجه به این موضوع حائز اهمیت است که direction صفحه یا عنصرهای سطوح بالاتر تاثیر بر روی flex-direction از نوع row دارند که جهت قرار گرفتن عنصرها در موارد مختلف به قرار زیر است:
row: در ltr از چپ به راست و در rtl از راست به چپ
row-reverse: در ltr از راست به چپ و در rtl از چپ به راست

ویژگی بعدی که برای عنصر نگهدارنده تعیین می شود flex-wrap می باشد. فرض کنید مجموع اندازه عنصرهای داخلی بیشتر از اندازه عنصر نگهدارنده شود، به وسیله این ویژگی می توان کنترل کرد که عنصرها به خط بعد بروند یا در همان خط بمانند.

که مقادیر این ویژگی به شرح زیر است:

• ویژگی که باعث می شود عنصرها به خط بعد بروند : wrap
• مقدار پیشفرض که باعث می شود تحت همه شرایط تمام عنصرها در یک خط باقی بمانند : nowrap
• این ویژگی باعث می شود عنصرهایی که در عنصر نگهدارنده جای نمی گیرند در همان خط بمانند و به جای آنها عنصرهای دیگر که از لحاظ ترتیب قبل آنها قرار دارند به خط بعد بروند : wrap-reverse

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

دو ویژگی flex-direction و flex-wrap را می توان به صورت کوتاه شده در یک ویژگی به نام flex-flow بیان کرد:

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

هم تراز سازی عنصرهای داخلی نسبت به محور اصلی (Main axis)

به کمک ویژگی justify-content که به عنصر نگهدارنده اطلاق می شود می توان عنصرهای داخلی را نسبت به محور اصلی هم تراز کرد که شکل زیر مقادیر ممکن برای این ویژگی و چگونه هم تراز سازی را برای هر مقدار نشان می دهد.

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

هم تراز سازی عنصرهای داخلی نسبت به محور عمود (Cross axis)

به کمک ویژگی align-items می توان عنصرهای داخلی را نسبت به محور عمود هم تراز کرد که شکل زیر مقادیر ممکن برای این ویژگی و چگونه هم تراز سازی را برای هر مقدار نشان می دهد.

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

هم تراز سازی عنصرهای داخلی بیشتر از یک ردیف

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

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

تغییر ترتیب عنصرهای داخلی

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

.second {
  order: 1;
}

انعطاف پذیر سازی عناصر داخلی

یکی از اصلی ترین امکاناتی که فلکس باکس در اختیار ما قرار می دهد قابلیت انعطاف پذیر بودن اندازه عنصرهای داخلی نسبت به فضای عنصر نگهدارنده است. که اگر جهت عنصر نگهدارنده row باشد عرض انعطاف پذیر می شود و اگر جهتش column باشد ارتفاع انعطاف پذیر است. برای رسیدن به این هدف باید از سه ویژگی flex-grow وflex-shrink و flex-basis استفاده کنیم.

در flex-grow که نشان می دهد یک عنصر داخلی چند برابر عنصرهای دیگر از فضای عنصر نگهدارنده سهم می برد. مثلا اگر همه عنصرها مقدار 1 را داشته باشند فضای عنصر نگهدارنده به صورت برابر بین عنصرهای داخلی تقسیم می شود اما اگر یکی از آنها مقدار 2 را بگیرد سهم آن دو برابر سهم دیگر عنصرهای داخلی می باشد.

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

ویژگی flex-shrink به ندرت مورد استقاده قرار می گیرد. کاربرد آن زمانی است که جمع اندازه های عنصرهای داخلی بیشتر از عنصر نگهدارنده شود و سرریز داشته باشیم. حال باید عنصرهای داخلی کمی کوچک شوند (shrink) تا از سرریز جلوگیری شود که این کم کردن اندازه عنصرهای داخلی با توجه به این عامل انجام می گیرد.

.first {
  flex-shrink: 1;
}

.second {
  flex-shrink: 3;
}

.third {
  flex-shrink: 2;
}

ویژگی flex-basis با توجه به جهت عنصر نگهدارنده به عرض یا ارتقاع به صورت خودکار تعلق میگیرد یعنی اگر جهت عنصر نگهدارنده row باشد این مقدار به عرض عنصرهای داخلی داده می شود و اگر column باشد به ارتقاع عنصرهای داخلی تعلق میگیرد. سپس هر مقدار که از فضای عنصر نگهدارنده باقی بماند بین عنصرهای داخلی با توجه به flex-growی آنها تقسیم می شود تا در نهایت عنصرهای داخلی به عرض یا ارتفاع واقعی خود دست پیدا کنند.

.first {
  flex-basis: 200px;
}

.second {
  flex-basis: 300px;
}

.third { 
  flex-basis: 250px;
}

با این سه عامل می توانیم عنصرهای داخلی را به طور کامل انعطاف پذیر طراحی کنیم و این کار واقعا کاربردی است. این سه ویژگی را می توان در یک ویژگی به نام flexبه صورت کوتاه شده بیان کرد که به این صورت تعریف می شود: flex: grow shrink basis

.first {
  flex: 1 1 400px;
}

.second {
  flex: 2 3 600px;
}

.third { 
  flex: 1 2 400px;
}

تراز سازی تک عنصر

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

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

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

توجه: float ،clear و vertical-align هیچ تاثیری روی عنصر فلکس ندارند.