آموزش رایگان برنامه نویسی در کانال یوتیوب yasharhabibimedia
سبد خرید
0

هیچ محصولی در سبد خرید نیست.

درک نحوه کارکرد فلکس باکس در سی اس اس

درک نحوه کارکرد فلکس باکس در سی اس اس

مطلب پیشنهادی:آموزش رایگان برنامه نویسی

فلکس باکس یکی از مفاهیم حوزه فرانت‌اند هست. این پست بهتون کمک میکنه تا در درک نحوه کارکرد فلکس باکس در سی اس اس بهتر عمل کنید و توی پروژه‌هاتون هم بتونید به سادگی ازش استفاده کنید.

درک نحوه کارکرد فلکس باکس در سی اس اس

فلکس باکس در حقیقت یکی از استانداردهایی است که توسط w3.org معرفی شده. قبلا توی طراحی از جداول، انواع positioned و استایل‌هایی مثل block و inline استفاده میشد. استفاده از این روش خیلی سخت و اذیت کننده بود. چون که همش باید با float دادن عناصر رو استایل‌دهی میکردید. کار اونجایی سخت‌تر میشد که شما باید سایت رو ریسپانسیو هم می‌کردید. به همین دلیل فلکس باکس با هدف ایجاد طرح بندی بهتر سایت‌ها توسعه داده شد و الان دولوپرای زیادی ازش برای طرح بندی سایت استفاده میکنن.

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

نکته مهمی که قبل از شروع طرح بندی باید رعایت بکنید، این هست که زمینه درست و خوبی از چیزی که میخواین طرح بندی کنید داشته باشید. شما باید بدونید که عناصر یک صفحه قراره چطور و به چه شکلی کنار همدیگه قرار بگیرند؟ نسبت عناصر به هم چطور باید باشه؟

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

توی این تصویر یک تگ div داریم که ۴ تا آیتم داره. با فلکس باکس میتونیم نحوه چیدمان، محل قرار گیری، ترتیب قرارگیری و غیره رو مشخص کنیم.

درک نحوه کارکرد فلکس باکس در سی اس اس با مثال

در این قسمت با یک مثال به شما در درک نحوه کارکرد فلکس باکس در سی اس اس کمک میکنم. فرض کنید که مثل عکس زیر در یک صفحه html، یک تگ div داریم که داخل این تگ div، باز ۴ تا div دیگه داریم.

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="purple"></div>
  <div class="blue"></div>
</div>

 

فکر میکنید خروجی این کد چی باشه؟ مرورگر تگ‌های div رو به صورت block (یعنی هر کدوم تو یه خط جدا) ایجاد میکنه. پس در حالت عادی خروجی به شکل زیر درمیاد.

برای استفاده از فلکس باکس توی استایل‌دهی این قطعه کد، اول از همه از div اصلی که کلاس container داره شروع می‌کنیم و به شکل زیر استایل‌دهی می‌کنیم.

.container {
  display: flex;
  height: 200px;
  width: 100%;
}

 

همونطور که توی کد می‌بینید، دیگه برای display از inline یا block استفاده نکردیم. بلکه از flex استفاده کردیم. همچنین عرض و ارتفاع هم تعریف کردیم. خب حالا میتونیم بریم سراغ بررسی اینکه چطور properties ها رو اعمال کنیم؟

Flex-direction

این ویژگی مسئول جهت محور اصلی هست. در دو عکس زیر نحوه مقداردهی و استایل نهایی رو میبینید.

flex-direction: row-reverse
flex-direction: row-reverse

در این شکل flex-direction: row-reverse رو تعریف کردیم و شکل نهایی به این صورت دراومده. در شکل بعدی هم flex-direction: row رو تعریف کردیم.

flex-direction: row
flex-direction: row

اگر به عکس‌ها دقت کنید، می‌بینید که وقتی مقدار flex-direction رو برابر row-reverse میدیم، محور برعکس میشه. این نکته درمورد column و column-reverse هم صدق میکنه. به شکل زیر دقت کنید.

توی تصویر میبینید که column-reverse محور رو افقی میکنه. یه نکته‌ای که اینجا باید بهش اشاره کنم، این هست که وقتی شما display رو flex مقداردهی میکنید، به صورت پیشفرض flex-direction برابر row قرار میگیره.

justify-content

از این ویژگی برای ترازکردن آیتم در امتداد محور اصلی استفاده میکنیم. مقادیر رایجی که بیشتر از اون ها استفاده می کنیم به ترتیب زیر هستند.

-Flex-start : عنصر (عناصر) ابتدای محور اصلی قرار میگیره.
-Flex-end : عنصر (عناصر) رو به انتهای محور میچینه.
-space-between : این مقدار، تمام صفحه رو با عناصر پر میکنه. کل فضای صفحه بین عناصر به صورت مساوی تقسیم بندی میشه.
-space-around : عناصر رو به صورت مساوی از همدیگه فاصله میده.
-center : عناصر رو در مرکز صفحه یا سند مرتب میکنه.

به چندتا عکس و مثالی که الان میگم توجه کنید.

flex-end
flex-end

اگر مقدار justify-content رو برابر flex-end قرار بدیم نتیجه میشه عکس بالا. یعنی عناصر به انتهای محور میرن. عکس‌های بعدی هم مقدار و نتیجه رو نشون میدن.

 

space-around
space-around

 

space between
space between

align-items

این ویژگی برای چیدن عناصر به صورت عرضی استفاده میشه. مقادیری که میگیره شامل flex-start، flex-end و center میشه. مقادیر مختلفی که به این ویژگی میدیم، باعث میشن که استایل‌های مختلفی ایجاد بشن. در ادامه مقادیر و شکل نهایی رو میتونید ببینید.

stretch
stretch

استفاده از مقدار stretch باعث همچین استایلی میشه. یعنی عناصر به طوری چیده میشن که کل ارتفاع ظرف (container) رو پر میکنند. اگر از baseline استفاده کنید استایل نهایی به شکل زیر میشه.

baseline
baseline

استفاده از مقدار align-self باعث میشه که استایل‌دهی به خود عناصر فرزند سپرده بشه. مثل شکل زیر :

baseline

یک مقدار دیگه و نتیجه‌اش:

center
center

Flex-basis

از این ویژگی برای تعیین مقدارهای اولیه استفاده میشه. برای مثال میتونیم عرض و ارتفاع رو با این ویژگی تعریف کنیم. از هر واحدی مثل پیسکل، rem یا percentags استفاده کرد. برای مقدار دادن هم می‌تونیم از مقادیری مثل auto و content هم استفاده کنیم

مثال:

flex-basis: 20%
flex-basis: 20%

مقداردهی رو به غیر از درصد یا پیکسل می‌تونیم با مقادیری مثل min-width یا flex-basis انجام بدیم. مثلا اگر مقدار رو flex-basis قرار بدیم، نتیجه میشه شکل زیر:

items with flex-basis constraints
items with flex-basis constraints

Flex-grow

این ویژگی به ما این امکان رو میده تا سرعت رشد یه عنصر نسبت به سایر عناصر رو تعیین کنیم. این ویژگی مقدار عددی میگیره. برای مثال در شکل زیر برای رنگ قرمز مقدار رو برابر ۳ قرار دادیم و نتیحه شده این:

 

flex-grow: 3; // for the red item
flex-grow: 3; // for the red item

Flex-shrink

این ویژگی برعکس ویژگی قبلیه و سرعت کوچیک شدن رو موقع کوچیک شدن ظرف یا کانتینر تعیین میکنه. در مثال زیر مقدار رو برای آبی برابر ۳ قرار دادیم:

flex-shrink: 3 for blue
flex-shrink: 3 for blue

Flex-wrap

از این ویژگی برای ظرف اصلی (container) به صورت چند خطی یا تک خطی استفاده میشه. با این ویژگی تعریف می‌کنیم که اگر محتوای درونی بیشتر از عرض ظرف شد، به خط بعدی بره یا نه؟ مثال:

flex-wrap: wrap;
flex-wrap: wrap;

flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;

Align-content

وقتی که ظرف رو به صورت چندخطی تعریف کردیم، باید خطوط رو در انتهای ظرف یا کانتینر تراز کنیم. از این ویژگی برای اینکار استفاده می‌کنیم. برای مثال در شکل‌های زیر یک بار مقدار رو برابر flex-end و یک بار برابر center قرار دادیم که ترتیب خطوط در انتها و در وسط قرار گرفته.

align-content: center;
align-content: center;

 

align-content: flex-end;
align-content: flex-end;

 

Order

عناصر درون یک سند به ترتیبی که می‌نویسیم نمایش داده میشن و اگر بخوایم این ترتیب رو بهم بزنیم میتونیم از order استفاده کنیم. در حالت پیش فرض مقدار این ویژگی ۰ هست.

 

جمع بندی

توی این مطلب درمورد درک نحوه کارکرد فلکس باکس در سی اس اس صحبت کردم. به عنوان نکته آخر اینو بگم که شما می تونید به صورت خلاصه مقداردهی خودتون رو انجام بدین. برای مثال:

flex-flow: flex-direction flex-wrap;

 

برای درک بهتر فلکس باکس حتما باید تمرین کنید. برای همین من سایت مدرسه وب رو بهتون معرفی میکنم.

 

امتیاز 5 از 4 رای

20

من یاشار حبیبی 15 سال تو حوزه برنامه نویسی وب در حال فعالیت هستم و اینجا قراره تجربیاتم رو باشما به اشتراک بزارم و باهم کلی چیز یادبگیریم و لذت ببریم

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان