Flexbox چگونه کار می کند

Flexbox

Flexbox چگونه کار می کند

Flexbox چگونه کار می کند 1350 500 اسماء اصلاحی

Flexbox یک مدل طرح بندی محتوا است که در CSS3 معرفی شد و هدف آن چیدمان و تراز بندی آسان آیتم های درون یک container است که اندازه  نامشخصی دارند. مدل Flexbox همان‌طور که از نامش هم پیداست برای طرح بندی آیتم هایی پویا و انعطاف پذیر به‌وجود آمده است.

چگونه از Flexbox استفاده کنیم؟

Flexbox مجموعه ای از دستورات (Property) یا به عبارتی یک ماژول به حساب می‌آید که با استفاده از آن می‌توان Layout هایی قابل انعطاف ایجاد کرد. مهم ترین ویژگی Flexbox که آن را به آینده Layout در CSS تبدیل کرده است، استفاده آسان و بدون پیچیدگی آن است. Flexbox مدل طرح بندی مدرنی است که با استفاده از آن می توان به آسانی طرح هایی واکنش‌گرا (responsive) ایجاد کرد.

در مرحله اول با استفاده از تکه کد زیر صفحه Html خود را بسازید:

Flexbox

Display: Flex :

برای استایل دهی به آیتم ها باید از Css کد زیر استفاده کنید و با استفاده از تکه کد Display:Flex ، Container خود را به Flex container تبدیل کنید:

Flexbox

نتیجه آن مانند شکل زیر می شود:

Flexbox

شکل زیر تفاوت بین نمایش block و نمایش flex را نشان می دهد.

Flexbox

Flex Direction :

Container Flexbox دارای دو محور است؛ یک محور اصلی (main axis)  و یک محور تقارن (cross axis) که به طور پیش فرض به شکل زیر هستند:

Flexbox

با استفاده از Flex-direction می توان محور اصلی را چرخش داد. به طور پیش فرض، آیتم ها در امتداد محور اصلی، از چپ به راست مرتب شده اند. به همین دلیل است که آیتم ها به صورت افقی به شما نمایش داده می شوند.

flex-direction-column

Flexbox

با استفاده ازویژگیflex-direction با مقدار column-reverse یا row-reverse ، می توان نمایش آیتم های درون یک ستون یا سطر را معکوس کرد.

Flexbox

 

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

 

Justify Content

Justify-content چگونگی هم ردیف قرار گرفتن آیتم ها در محور اصلی را بررسی می کند.

Flexbox

justify-content دارای ۵ مقدار به شرح زیر است:

  • Flex-start
  • Flex-end
  • Center
  • Space-between
  • Space-around

Flexbox

Align Items

همان‌طور که justify-content در طول محور اصلی کار می کند، align-items به محور تقارن و بر روی سطر اعمال می شود.

Align Items هم دارای ۵ مقدار به شرح زیر است:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Flexbox

سه مورد اول مانند justify-content است با این تفاوت که در طول سطر اعمال می شود.

تفاوت flex-direction:row و flex-direction:column

با flex-direction:row ، آیتم ها در امتداد محور اصلی به صورت افقی قرار می گیرند و با flex-direction:column ، آیتم ها در امتداد محورعمودی به صورت عمودی قرار می گیرند. حتی اگر آیتم ها به صورت عمودی و افقی در هر دو حالت متمرکز باشند، این دو قابل تعویض نیستند!

Flexbox

ترازسازی یک عنصر با align-self

align-items همه آیتم های داخلی را با هم تراز می کند. Align-self به شما اجازه می دهد که به صورت دستی یک عنصر خاص را تراز کنید.

Flexbox

flex-basis

این ویژگی مقدار پایه عرض یا ارتفاع آیتم را تعیین می‌کند. یعنی عرض یا ارتفاع (به ستونی یا ردیفی بودن آیتم ها بستگی دارد) نمی تواند از این مقدار پایه کمتر شود. این ویژگی مانند min-height و min-width عمل می‌کند. مقدار پیش‌فرض این خاصیت auto است، یعنی آیتم های Flex می‌توانند تا جایی کوچک شوند که عرض یا ارتفاع آن‌ها به صفر برسد.

Flexbox

flex-grow

این ویژگی تعیین می‌کند که یک آیتم داخلی چند برابر آیتم های دیگر از فضای عنصر نگهدارنده سهم می برد. مثلا اگر مقدار همه آیتم ها ۱ باشد فضای Container به صورت برابر بین آیتم های داخلی تقسیم می شود اما اگر یکی از آن‌ها مقدار ۲ بگیرد سهم آن، دو برابر سهم دیگر آیتم های داخلی می شود.

Flexbox

flex-shrink

کاربرد این ویژگی زمانی است که جمع اندازه های آیتم های داخلی بیشتر از Container شود و سرریز داشته باشیم. حال باید آیتم های داخلی، کمی آب شوند (shrink) تا از سرریزی جلو گیری شود که این کم کردن اندازه آیتم های داخلی با توجه به این ویژگی انجام می گیرد.

اگر خاصیت flex-wrap را برای container برابر nowrap باشد، آیتم ها تا زمانی که عرضشان به ۰ برسد کوچک می‌شوند. حال اگر در این صورت مقدار flex-shrink یکی از آیتم ها را برابر ۲ قرار دهیم، آن آیتم ۲ برابر دیگر آیتم ها کوچک می‌شود.

در شکل زیر flex-shrink برای کلیه آیتم ها برابر با یک است و همه آیتم ها به تناسب پهنای آن ها کم می شوند.

Flexbox

اما در شکل زیر سومین آیتم flex-shrink آن برابر با صفر است و پهنای آن هیچ تغییری نمی کند.

Flexbox

Flex:

این خاصیت یک مختصر نویسی برای خاصیت های flex-grow ،  flex-shrink و flex-basis است.

Flexbox

یکشنبه‌ها قبل از شروع کار یک مقاله رایگان از لابراتوار رسانه برای بهبود کسب و کار خود دریافت کنید

Subscribe for free resources and news updates.