ماژول طرح بندی CSS Flexbox

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

  • مسدود کردن ، برای بخشهای موجود در یک صفحه وب
  • درون خطی ، برای متن
  • جدول ، برای داده های جدول دو بعدی
  • موقعیتی ، برای موقعیت صریح یک عنصر

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


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

ویژگی های flexbox در همه مرورگرهای مدرن پشتیبانی می شود.


عناصر Flexbox

برای شروع استفاده از مدل Flexbox ، ابتدا باید یک ظرف فلکس تعریف کنید.

عنصر بالا یک ظرف فلکس (منطقه آبی) را نشان می دهد که دارای سه مورد خم است.

مثال

یک ظرف فلکس با سه مورد فلکس:

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

منبع