آموزش فلکس باکس (Flexbox)

دسته بندی: آموزش طراحی وب

معرفی FlexBox

CSS Flexible Box Layout که معمولا به عنوان Flexboxشناخته می شود، یک مدل طرح بندی وب با استفاده از CSS است.  Flexbox Layout به عناصر رسپانسیو درون یک container اجازه می دهد به صورت خودکار براساس اندازه صفحه (یا دستگاه) تنظیم شوند.
اکثر صفحات وب به صورت ترکیبی از HTML و CSS نوشته شده اند. به طور خلاصه، HTML محتوا و ساختار منطقی صفحه را مشخص می کند، در حالی که CSS مشخص می کند که چطور به نظر برسد: رنگ ها، فونت ها، قالب بندی، طرح بندی و سبک ها.
مهمترین نکته ای که در روزهای اول ارائه Flexbox وجود داشت این بود که این کدها تنها برای طراحی بخشی از صفحه سایت (برای مثال منو) استفاده می گردید و برای طراحی قالب کل صفحه مورد استفاده نبود، چرا که برای ساخت قالب اصلی سایت با Flexbox ها باید از مجموعه کدهای Flexbox و CSS در کنار هم استفاده شود که به این مجموعه Grid Layout Module  گفته می شود. جدا از تمام مزایای Grid Layout Module، این مجموعه یک محدویت بزرگ را برای طراحان به همراه داشت، حتی آخرین نسخه های بروزرسانی مرورگرها هم با آن مشکل داشتند. در واقع یکی از علت هایی که ورژن های مختلفی از Flexbox ها ارائه شد تردید شرکت های ارائه دهنده مرورگر ها در پشتیبانی از آن بود.
امروزه قالبلیت های Flexbox تنها در مرورگر IE9 و پایین تر قابل پشتیبانی نیست.

قبل از ماژول  Flexbox Layout، چهار حالت layout یا صفحه بندی وجود داشت:

  • Block: برای بخش های مختلف یک صفحه وب
  • Inline: برای متن
  • Table: برای داده های جدول دو بعدی
  • Position: برای موقعیت قرارگیری یک عنصر

ماژول Flexbox Layout، طرح بندی رسپانسیو و انعطاف پذیر بدون استفاده از float و position را آسان تر می کند.
به کمک کد های Flexbox می توانیم بجای اینکه برای هر آبجکت بصورت انفرادی خصوصیت تعیین کنیم، تمام آبجکت ها را بصورت گروه در آورده و برای آنها style های گروهی قرار دهیم. در واقع استفاده از Flexbox ها بهترین گزینه برای موقعیت دهی آبجکت های درون یک صفحه می باشد.
عرض و ارتفاع flexboxes برای انطباق با فضای صفحه نمایش متفاوت است. منطق Flexbox همچنین می پرسد آیا شما می خواهید div را به سمت راست یا پایین متمرکز کنید. نظم نمایش عناصر flexbox مستقل از نظم آنها در کد منبع است. طرح بندی های محبوب می تواند به سادگی و با کدنویسی ساده ایجاد شود. مشخصات مدرن flexbox تا چندین بار از زمان انتشار اولیه در سال 2009 به روز شده است.

FlexBox

ویژگی های flexbox

  • پشتیبانی از تمام مرورگر ها
  • عدم نگرانی در باره سینتکس
  • یادگیری و استفاده آسان
  • متمرکز کردن عناصر عمودی و افقی
  • تغییر آسان عناصر درون خطی
  • ساده سازی پیچیدگی ها

شروع کار با Flexbox

برای شروع استفاده از مدل Flexbox ابتدا باید یک flex container را تعریف کنید. سپس عناصر داخلی یا flex-item را به آن اضافه کنید.

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div> 

ویژگیهای flex container

  • flex-direction : نحوه ی قرار گرفتن flex item هارا به صورت ستونی و یا ردیفی تعیین می کند.
  • flex-wrap : به صورت پیشفرض تمامی فلکس‌آیتم ها در یک خط قرار می گیرند. می توان با استفاده از خاصیت flex-wrap تعیین کرد که فلکس آیتم ها در چند خط قرار بگیرند که به هر یک از این خط ها flex line می گویند.
  • flex-flow : می توانید دو مقدار flex-direction و flex-wrap را با استفاده از این مقدار تنظیم کنید. مقدار پیشفرض آن row nowrap است.
  • justify-content :نحوه ی چینش آیتم ها در محور اصلی(main axis) را تعیین می کند.
  • align-items : نحوه چینش فلکس‌آیتم هارا در محور عرضی(cross axis) مشخص می کند.
  • align-content : هنگامی که flex container دارای فضای بیشتر از flex line هاست، می تواند نحوه ی چینش آنها را تعیین کند.

 

آیا این نوشته را دوست داشتید؟