یکی از ویژگی‌های جذاب و مفیدی که از زمان CSS3 وارد صفحات وب شد flexbox هست. با استفاده از flexbox این قابلیت رو داریم که itemهای صفحه رو با چینش‌های خاصی کنار هم قرار بدیم. همراه ما باشید تا با این ویژگی آشنا بشیم.

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

طبق جدولی که w3schools ارائه داده، flexbox در تمام مرورگرهای جدید قابل استفاده هست.

آمار سایت canisuse رو هم میتونید در تصویر زیر ببینید.

– ویژگی‌های قسمت container

ویژگی‌های موجود در flexbox را به دو دسته تقسیم میکنیم؛ دسته‌ی اول مربوط به container میباشد که در برگیرنده‌ی بقیه item‌ها هست، دسته‌ی دوم مربوط به item‌های درون container میباشد.

در container امکان استفاده از ویژگی‌های زیر رو داریم:

• display
• flex-direction
• flex-wrap
• justify-content
• align-items

– display

قدم اول برای استفاده از flexbox، قراردادن مقدار ویژگی display برابر flex میباشد.

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

– flex-direction

برای تعیین جهت قرارگیری item‌ها به کار میرود. از ۴ مقدار row، row-reverse، column، column-reverse میتونید برای این ویژگی استفاده کنید. مقدار پیشفرض row هست.

.container {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  }

اگر این مقدار برابر row باشد، item‌ها به صورت افقی و به ترتیب از چپ به راست کنار هم قرار میگیرند. اگر row-reverse رو به کار ببریم item‌ها به صورت افقی ولی از راست به چپ کنار هم قرار میگیرند.

به همین ترتیب اگر column رو به کار ببریم به صورت عمودی از بالا به پایین و اگر column-reverse رو به کار ببریم از پایین به بالا قرار میگیرند.

– flex-wrap

با استفاده از این ویژگی میتوان تعیین کرد که item‌ها در صورت لزوم به خط بعدی منتقل شوند یا نه. مثلا اگر چهار item داشته باشیم و عرض هر item برابر ۱۰۰ پیکسل باشد و عرض container برابر ۲۰۰ پیکسل باشد، با استفاده از flex-wrap میتوانیم تعیین کنیم که عرض item‌ها کم شود؛ که در یک خط جا بگیرند یا اینکه همین عرض ۱۰۰ پیکسلی رو داشته باشند و اگر در این خط جا نشدند به خط بعد منتقل بشند.

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

• nowrap: در یک خط قرار میگیرند.
• wrap: در صورت لزوم به خط بعد منتقل میشوند.
• wrap-reverse: در صورت لزوم به خط بعد منتقل میشوند ولی از آخر به اول.

– justify-content

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

• flex-start: تمام item‌ها از سمت چپ شروع به چیده شدن میکنند.
• flex-end: تمام item‌ها از سمت راست شروع به چیده شدن میکنند.
• center: تمام item‌ها وسط‌چین میشوند.
• space-between: بین item‌ها به مقدار یکسان فضای خالی قرار میگیرد ولی itemهای کناری به container میچسبند.
• space-around: بین item‌ها به مقدار یکسان فضای خالی قرار میگیرد و item‌های کناری هم به همین مقدار از container فاصله میگیرند.

– align-items

وظیفه‌ی چیدن item‌ها وقتی که تمام فضای در اختیار رو مورد استفاده قرار نمیدن به عهده‌ی این ویژگی هست. ۵ مقدار برای align-items میتوان به کار برد. اگر item‌ها به صورت افقی چیده شده باشند این مقدار به صورت عمودی اعمال میشود و بالعکس.

• stretch: با این مقدار item‌ها کشیده میشوند تا کل فضا رو پر کنند.
• flex-start: در بالای container قرار میگیرند.
• flex-end: در پایین container قرار میگیرند.
• center: وسط‌چین میشوند.

– ویژگی‌های item‌ها

ویژگی‌هایی را هم میتوان برای هرکدام از item‌ها در نظر گرفت. در زیر به بعضی از این ویژگی‌ها اشاره شده:

• flex-grow
• align-self

– flex-grow

با استفاده از این ویژگی میتوانیم نسبت اندازه‌ی یک item نسبت به بقیه item‌ها رو تعیین کنیم (به جای width و height). به طور پیشفرض این مقدار برابر ۱ است؛ یعنی تمام item‌ها به یک اندازه فضا اشغال میکنند. اگر برای یکی از این item‌ها مقدار flex-grow را برابر ۲ قرار دهیم به اندازه‌ی ۲برابر بقیه item‌ها فضا اشغال میکند.

– align-self

کار align-items را انجام میدهد با این تفاوت که فقط روی همین item اعمال میشود.