CSS Flexbox: راهنمای نهایی برای ایجاد طرح‌بندی وب واکنش‌گرا

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

CSS Flexbox (همچنین به عنوان طرح بندی Flexbox شناخته می شود) روشی انعطاف پذیر برای توزیع و تراز کردن عناصر در یک ظرف ارائه می دهد. Flexbox Layout فرآیند ساخت طرح‌بندی‌های پیچیده و دستیابی به طرح‌های واکنش‌گرا را ساده می‌کند.

در این مقاله، من یک نمای کلی از CSS Flexbox ارائه می‌دهم، کاوش عمیقی از اصول اصلی CSS Flexbox ارائه می‌دهم و نشان می‌دهم که چگونه می‌توان از آن برای دستیابی به طرح‌بندی‌های وب انعطاف‌پذیر و پاسخگو استفاده کرد.

مفهوم CSS FLEXBOX
معرفی CSS Flexbox روش طراحی و توسعه طرح‌بندی‌های وب را متحول کرده است. این فرآیند ایجاد طرح های تطبیقی ​​و پاسخگو را ساده کرده است و نیاز به تنظیمات و محاسبات پیچیده را قطع کرده است. این روشی برای چیدمان عناصر در یک صفحه وب فراهم می‌کند، بنابراین آنها می‌توانند اندازه و موقعیت خود را متناسب با اندازه‌های مختلف تغییر دهند.
درک مفاهیم Flex Container و Flex Items، که اجزای کلیدی در استفاده موثر CSS Flexbox هستند، ضروری است.

ظروف فلکس
ظرف فلکس (همچنین به عنوان ظرف فلکس باکس شناخته می شود) مانند جعبه ای است که عناصر دیگر را در خود جای می دهد. این اجازه می دهد تا چیدمان انعطاف پذیر و تراز عناصر در یک ظرف. برای ایجاد یک ظرف انعطاف پذیر، می توانید این خط کد را به عنصر کانتینر اضافه کنید:

.container {
display: flex;
}

هنگامی که نمایش: flex را به یک عنصر اعمال می کنید، عنصر به یک ظرف انعطاف پذیر تبدیل می شود. این بدان معناست که عنصر کانتینر به عناصر فرزند که به عنوان آیتم‌های انعطاف‌پذیر نامیده می‌شوند، تبدیل می‌شود و آنها را قادر می‌سازد در طرح‌بندی انعطاف‌پذیر شرکت کنند.
شاید اکنون متوجه شده باشید، آیتم فلکس بدون کانتینر فلکس باطل است. یک راه ساده تر برای نگاه کردن به آن، کودک نمی تواند بدون پدر و مادر وجود داشته باشد، از این رو آیتم Flex نمی تواند بدون ظرف Flex وجود داشته باشد.

آیتم FLEX
همانطور که قبلا ذکر شد، مورد Flex فرزند عنصر والد Flex Container است. به طور پیش فرض، آنها به صورت افقی در یک ردیف تراز شده اند، اما می توان آنها را تغییر داد تا به صورت عمودی تراز شوند.
برای درک بهتر Flex Item، اجازه دهید به این مثال نگاهی بیندازیم:

<div class="container">
<div class = "item" > Flex Item A </div>
<div class = "item" > Flex Item B </div>
<div class = "item" > Flex Item C </div>
</div>

در کد بالا، ما یک عنصر div با نام کلاس “container” داریم. این عنصر به عنوان کانتینر Flex عمل می کند، حاوی آیتم های Flex است که توسط عناصر div داخل آن نمایش داده می شود. هر یک از عناصر div دارای نام کلاس “item” هستند.

مفاهیم و ویژگی های ضروری
CSS Flexbox دارای طیف گسترده ای از مفاهیم و ویژگی های کاربر پسند برای قالب بندی طرح و ظاهر ظروف فلکس و اقلام فلکس است. در اینجا برخی از ویژگی های دوستانه ارائه شده توسط CSS Flexbox به همراه قطعه کد مربوطه برای نشان دادن استفاده از آنها آورده شده است:

• جهت فلکس:
  جهت فلکس تراز و جهت اقلام فلکس را تعیین می کند. این کنترل می کند که آیا موارد Flex به صورت افقی در یک ردیف یا به صورت عمودی در یک ستون مرتب شده اند. مقادیر می توانند «ردیف»، «سطری-برعکس»، «ستونی» یا «ستونی-معکوس» باشند.

با تنظیم ‘flex-direction’ روی ‘row’، موارد انعطاف پذیر در کنار هم به صورت افقی قرار می گیرند و یک طرح بندی ردیف مانند را تشکیل می دهند. این مقدار پیش‌فرض برای «flex-direction» است، بنابراین اگر مقدار دیگری تنظیم نشده باشد، مورد flex در یک ردیف قرار می‌گیرد.

تنظیم مقدار ویژگی ‘flex-direction’ روی “Column” ایجاد طرح‌بندی‌های عمودی را امکان‌پذیر می‌کند، جایی که آیتم‌های Flex به شکل ستونی مرتب شده‌اند. این امر به ویژه هنگام طراحی طرح‌بندی‌هایی مانند منوهای پیمایش عمودی یا بخش‌های محتوای انباشته بسیار ارزشمند است.

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

با تغییر ویژگی «flex-direction» و تنظیم آن بر روی «row-reverse»، می‌توانید طرح‌بندی‌های افقی را ایجاد کنید که در آن آیتم‌های flex به ترتیب معکوس جریان دارند. این می تواند زمانی مفید باشد که می خواهید محتوا یا عناصر را در جهت راست به چپ ارائه کنید، مانند زبانی که از راست به چپ خوانده می شود.

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

با تغییر ویژگی «flex-direction» و تنظیم آن بر روی «column-reverse»، می‌توانید طرح‌بندی‌های عمودی را ایجاد کنید که در آن آیتم‌های flex به ترتیب معکوس جریان دارند. این می تواند زمانی مفید باشد که می خواهید محتوا یا عناصر را در جهت پایین به بالا ارائه دهید، به عنوان مثال، در سناریوهایی که جدیدترین یا مهم ترین موارد در بالا قرار می گیرند.

• توجیه – محتوا: ویژگی «justify-content» در CSS Flexbox به شما امکان می‌دهد نحوه قرارگیری و تراز کردن آیتم‌های Flex در امتداد محور افقی در یک ظرف Flex را کنترل کنید. نحوه توزیع فضا بین اقلام Flex را تعیین می کند و بر ترتیب و فاصله آنها در ظرف تأثیر می گذارد. با تنظیم این ویژگی، می‌توانید نحوه قرارگیری بصری اقلام انعطاف‌پذیر را کنترل کنید، آیا آنها در ابتدا، انتهای، مرکز ظرف قرار دارند یا با فاصله بین یا اطراف آنها توزیع شده‌اند. مقادیر عبارتند از ‘flex-start’، ‘flex-end’، ‘center’، ‘space-ween’، ‘space-around’ و موارد دیگر.

با تنظیم ویژگی «justify-content» بر روی «flex-start»، آیتم‌های Flex با شروع ظرف در امتداد محور اصلی تراز خواهند شد. این بدان معنی است که آیتم s در ابتدای ظرف قرار می گیرد و هر فضای باقی مانده در انتهای ظرف ظاهر می شود.

به عبارت ساده تر، “juustify-content: flex-start;” اعلامیه تضمین می‌کند که اگر محور اصلی افقی باشد (جهت ردیف) اقلام فلکس به سمت چپ کانتینر یا اگر محور اصلی عمودی باشد (جهت ستون) به بالای ظرف فشار داده می‌شوند.

این مقدار پیش‌فرض برای «justify-content» است، به این معنی که اگر مقدار دیگری تنظیم نشده باشد، موارد انعطاف‌پذیر به طور طبیعی با ابتدای ظرف هماهنگ می‌شوند.

با تنظیم آن بر روی “flex-end”، اقلام Flex در امتداد محور اصلی در انتهای ظرف قرار می گیرند. این بدان معنی است که اگر محور اصلی افقی باشد (جهت ردیف) یا اگر محور اصلی عمودی باشد (جهت ستون) اقلام در سمت راست ظرف قرار می گیرند.

به عبارت ساده تر، “juustify-content: flex-end;” اعلامیه تضمین می‌کند که اگر محور اصلی افقی باشد، اقلام انعطاف‌پذیر به سمت راست کانتینر یا اگر محور اصلی عمودی باشد به پایین ظرف فشار داده می‌شوند.

هنگامی که ویژگی “justify-content” روی “center” تنظیم می شود، به صورت افقی آیتم های Flex را در داخل ظرف مرکزی می کند. این بدان معنی است که اقلام به طور مساوی با فضای مساوی در هر دو طرف توزیع می شوند و آنها را به سمت مرکز ظرف هل می دهد.

هنگامی که “محتوای توجیه” روی “فضای بین” تنظیم شده است، به این معنی است که محتوای داخل ظرف به طور مساوی در امتداد محور افقی توزیع می شود و فاصله های مساوی بین هر آیتم قرار می گیرد. اولین مورد با ابتدای ظرف تراز می شود، آخرین مورد با انتهای ظرف تراز می شود و موارد باقی مانده به طور مساوی بین آنها قرار می گیرد.

هنگامی که “justify-content” روی “space-around” تنظیم می شود، آیتم های Flex را با فضای مساوی در اطراف آنها در امتداد محور اصلی توزیع می کند. این بدان معناست که فضای موجود بین آیتم های فلکس به طور مساوی تقسیم می شود و هم قبل از اولین مورد و هم بعد از آخرین مورد قرار می گیرد. همچنین فضا بین هر جفت آیتم مجاور به طور مساوی توزیع شده است.

• تراز کردن موارد
  ویژگی “align-item” به شما امکان می دهد تا نحوه تراز عمودی اقلام انعطاف پذیر در ظرف خود را کنترل کنید. به‌طور پیش‌فرض، آیتم‌های انعطاف‌پذیر با ابتدای کانتینر تراز می‌شوند. با این حال، با استفاده از ویژگی ‘align-item’، می توانید طرح را برای دستیابی به تراز دلخواه تغییر دهید. بیایید مقادیر مختلفی که align-items دارایی می تواند:

flex-start اقلام فلکس را با ابتدای ظرف تراز می کند و آنها را از بالا روی هم می چیند.

با انتهای انعطاف پذیر، اقلام فلکس در انتهای ظرف قرار می گیرند و آنها را از پایین روی هم می چینند.

ویژگی مرکز اقلام انعطاف پذیر را به صورت عمودی در داخل ظرف متمرکز می کند.

.container {
  align-items: baseline;
}

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

.container {
  align-items: stretch;
}

هنگام استفاده از stretch مقدار، اقلام انعطاف پذیر به صورت عمودی کشیده می شوند تا ارتفاع ظرف را پر کنند. این رفتار به طور پیش فرض است.

نتیجه
در نتیجه، CSS Flexbox یک ابزار ضروری برای ایجاد طرح‌بندی‌های وب واکنش‌گرا و تطبیق آنها با اندازه‌های مختلف صفحه نمایش و دستگاه‌ها است. با درک مفاهیم اصلی Flex Containers و Flex Items، طراحان و توسعه دهندگان وب می توانند از قدرت Flexbox برای ساده سازی فرآیند ساخت طرح بندی های پیچیده استفاده کنند.

ممنون که خواندید. با من ارتباط برقرار کن توییتر