آموزش جامع FlexBox در سال 1401

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

پیشینه FlexBox

ماژول FlexBox یا به عبارتی Flexible Box یا به تعبیری FlexBoc Layout در سال 2009 و با هدف ارائه یک روش کارآمدتر برای طراحی چیدمان صفحات وب معرفی شد. بعدها در سال 2017 کنسرسیوم جهانی وب توصیه کرد تا برای طراحی وبسایت از این ماژول استفاده شود. به کمک این ماژول می توانید ترتیب چینش و تراز عناصر صفحه را تعیین کنید.

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

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

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

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

مهمتر از همه، برخلاف روش های طرح بندی معمول (همچون Block و inline) که فقط امکان چینش عناصر به صورت افقی را در نظر می گیرند، روش FlexBox، راستای عمود یا ستونی را نیز کنترل می کند.

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

نکته: طرح FlexBox برای طراحی وب اپلکیشن ها و طرح بندی های کوچک بسیار مناسب است. در حالی که در طرح بندی های مقیاس بزرگ، روش Grid مناسب تر است.

مبانی و اصطلاحات FlexBox

از آنجائیکه FlexBox یک ماژول کامل است، خود به تنهایی شامل چندین خصوصیت CSS (CSS Property) می باشد.

برخی از این خصوصیات بر روی المان نگهدارنده (Flex Container) که به آن المان پدر گفته می شود، اعمال می شوند، و برخی دیگر از این خصوصیات بر المان های فرزند (Flex Item) اعمال می شوند.

در طراحی با روش های Block و inline، طراحی بر اساس ویژگی Direction استوار است. یعنی متناسب با direction، جهت چینش در این دو روش تعیین می شود.

در روش FlexBox علاوه برای direction، می توانید جهت چینش المان ها را فارق از direction، با کمک ویژگی flex-flow یا flex-direction کنترل کنید.

برای درک بهتر، به شکل زیر دقت کنید:

آیتم ها (فرزندان) در راستای محور اصلی (از شروع تا پایان آن) و محوز متقاطع یا محور فرعی (از شروع تا پایان آن) قرار می گیرند.

یعنی عناصر به ترتیب از چپ به راست و بالا به پائین چیده می شوند. البته این در صورتی است که direction صفحه ltr یا به عبارتی Left to right یعنی چپ به راست باشد. بعدا تاثیر direction صفحه بر چینس عناصر را خواهیم دید. همچنین با تنظیم ویژگی flex-flow یا flex-direction این چینش تغییر خواهد کرد. هم در راستای افقی و هم در راستای عمودی.

با اصطلاحات موجود در تصویر فوق بیشتر آشنا بشیم:

محور اصلی: محور اصلی نگهدارنده Flex محور اولیه ای است که آیتم ها و فرزندان در راستای آن چیده خواهند شد. بسته به ویژگی flex-direction این مقدار می تواند در راستای افقی یا عمود و در راستای مستقیم یا معکوس باشد. یعنی هر 4 جهت اصلی ممکن است. بعدا بیشتر با این ویژگی آشنا خواهید شد.

شروع محور اصلی | پایان محور اصلی: تمام فرزندان متناسب با flex-direction از ابتدای محور اصلی تا پایان آن قرار می گیرند.

بعد اصلی: عرض یا ارتفاع یک آیتم فلکس، که در راستای محور اصلی باشد، بعد یا اندازه اصلی آن المان است. اندازه یا بعد اصلی نگهدارنده، برابر مجموع ابعاد المان های آن در راستای اصلی است. بسته به مقدار flex-direction، بعد اصلی یا برابر width خواهد بود و یا برابر height. فرضا اگر مقدار flex-direction:row باشد، بعد اصلی برابر width (در راستای افق) خواهد بود.

محور فرعی: محور عمود بر محور اصلی را محور متقاطع یا محور فرعی می گویند. جهت آن بستگی به جهت محور اصلی دارد. جهت محور اصلی هم بستگی به flex-direction دارد.

شروع محور فرعی | پایان محور فرعی: وقتی عناصر، محور اصلی را پر کنند، سایر عناصر در راستای محور فرعی مرتب می شوند. فرض کنید محور اصلی در راستای افق و محور فرعی در راستای عمود است. پس از اینکه تعدادی المان محور اصلی را پر کنند، سایت عناصر در ردیف بعدی قرار گرفته و مجددا در راستای محور اصلی ردیف می شوند. هر ردیف، در راستای فرعی (در این مثال از بالا به پائین مرتب می شوند). برای مثال در شکل بالا اگر4 عنصر flex-box با ابعاد فوق داشته باشم، دو عنصر ردیف اول و دو عنصر در ردیف دوم قرار می گیرند. لذا شروع محور فرعی از بالا و پایان آن در پائین خواهد بود.

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

خوب شاید با توضیحات فوق کمی گمی سردرگم شده باشید. با ادامه آموزش همراه باشید تا با مشاهده مثال ها و توضیحات بیشتر، مطالب فوق برایتان روشن شود.

خصوصیات FlexBox

در ادامه با خصوصیات ماژول FlexBoxآشنا می شوید. برخی از این خصوصیات مربوط به المان نگهدارنده فلکس (المان پدر) و برخی مربوط به المان های فرزند (Flex Item) است.

خصوصیات المان نگهدارنده FlexBox (Flex Container)

display

برای تعریف یک المان نگهدارنده Flex باید از ویژگی Display، استفاده کنیم. به عبارتی با استفاده از این ویژگی می توانید تعریف کنید که یک المان HTML باید به صورت یک نگهدارنده Flex عمل کند.

مقادیر مختلفی برای ویژگی display وجود دارد. شامل:

• Block
• inline
• inline-block
• Flex
• inline-flex
• Grid
• inline-grid

خوب همانطور که مشخص است، برای اینکه یک المان از قوانین FlexBox پیروی کند، مقدار ویژگی Display آن المان، باید یکی از مقادیر Flex یا inline-flex باشد.

نکته مهم: وقتی به یک المان Display:flex یا Display:inline-flex می دهید، آن المان (نگهدارنده) و تمام فرزندان مستقیم آن از قوانین Flex پیروی می کنند.

منظور از فرزندان مستقیم، المان هایی هستند که درون نگهدارنده قرار دارند و این شامل فرزندان درونی تر نخواهد شد.

.container {
  display: flex; /* or inline-flex */
}

اما تفاوت flex و inline-flex چیست؟

وقتی المانی دارای display:flex باشد، تمام عرض نگهدارنده خود را پر خواهد کرد. حتی اگر تعداد المان های فرزند و مجموع عرض آن ها کمتر از عرض نگهدارنده باشد.

در حالی که المان با display:inline-flex، فقط به اندازه ای که نیاز دارد عرض اشغال می کند. برای درک بیشتر، به تصویر زیر نگاه کنید:

flex-direction

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

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

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row (پیش فرض): در این حالت المان ها به صورت ردیف و در جهت direction المان قرار می گیرند. جهت یادآوری باید گفت که با ویژگی direction:ltr المان چپ چین (یعنی از چپ به راست) و با ویژگی direction:rtl المان ها راست چین می شوند. وقتی direction صفحه شما بر روی ltr باشد، با تنظیم flex-direction:row، المان ها به صورت ردیفی از چپ به راست قرار می گیرند. وقتی مقدار direction بر روی rtl باشد، المان ها به صورت ردیف و از سمت چپ به راست مرتب خواهند شد. پس می بینید که جهت المان های flex از مقدار direction تبعیت می کند و راستای آن ها (ردیفی یا ستونی) از ویژگی flex-direction تبعیت می کند.
• row-reverse: در این حالت، چیشن المان ها ردیفی است، اما در جهت عکس direction مرتب می شوند. یعنی اگر direction:rtl باشد، در این حالت، المان ها در راستای ردیف، اما در جهت عکس یعنی از چپ به راست مرتب می شوند.
• column: در این حالت، المان ها به صورت ستونی و از بالا به پائین مرتب می شوند. یعنی به جای اینکه در کنار هم قرار بگیرند، زیر هم مرتب می شوند.
• column-reverse: در این شرایط، المان ها ستونی مرتب می شوند، اما از پائین به سمت بالا مرتب می شوند. یعنی اولین المان در پائین ترین ردیف، المان دوم بالای آن و به همین ترتیب مرتبط خواهند شد.

flex-wrap

به صورت پیش فرض،المان های Flex سعی می کنند در یک خط کنار هم قرار بگیرند. اما در شرایطی ممکن است امکان قرار گیری همه این المان ها در کنار هم ممکن نبوده و عرض صفحه گنجایش همه المان ها را نداشته باشد.

با تغییر ویژگی flex-wrap به مقدار wrap می توانید به المان ها دستور دهید تا در صورتی که عرض صفحه پر شد، المان ها در ردیف بعدی کنار هم قرار بگیرند. یعنی اگر فرضا 10 المان داشتیم که 5 تای آن ها ردیف اول را پر کردند، 5تا بعدی در ردیف بعدی مرتب می شوند.

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

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

مقادیر مختلف ویژگی flex-wrap:

• nowrap (پیش فرض) : تمام آیتم های Flex کنار هم قرار می گیرند. اگر مجموع عرض المان ها از عرض صفحه بیشتر شود، اسکرول افقی ایجاد می شود. المان ها هرگز در ردیف های مجزا نبوده و همه و همه کنار هم ردیف می شوند.
• wrap: المان های Flex تا جایی که ممکن باشد (مجموع عرض آن ها بیشتر از عرض صفحه نشود)، در یک ردیف کنار هم قرار می گیرند و بقیه المان ها در ردیف بعدی و بعدی (از بالا به پائین) قرار می گیرند. یعنی پس از پر کردن ردیف اول، ردیف دوم در پائین ردیف اول و سومی در پائین ردیف دوم و به همین ترتیب قرار می گیرند. هرگز اسکرول افقی ایجاد نمی شود.
• wrap-reverse: درست مثل حالت قبلی (wrap) است، با این تفاوت که المان ها در چندین ردیف از پائین به بالا مرتب می شوند. یعنی ردیف دوم در بالای ردیف اول مرتب می شود.

دموی حالت های فوق رو می تونید در اینجا ببینید.

این آموزش در حال تکمیل است…

9 درصد تخفیف ویژه با کد معرف زیر
mwh-683cc