آموزش CSS پیشرفته : فلکس‌باکس

Flexbox یک روش چیدمان تک‌بعدی برای چیدمان آیتم‌ها در ردیف‌ها یا ستون‌ها است. آیتم‌ها برای پر کردن فضای اضافی خم می‌شوند (منبسط می‌شوند) یا برای قرار گرفتن در فضاهای کوچک‌تر کوچک می‌شوند. این مقاله تمام اصول اولیه را توضیح می‌دهد.

چرا فلکس باکس؟

طرح‌بندی جعبه‌ای انعطاف‌پذیر CSS شما را قادر می‌سازد تا: یک بلوک محتوا را به صورت عمودی در مرکز والد خود قرار دهید. تمام فرزندان یک کانتینر را صرف نظر از میزان عرض/ارتفاع موجود، به مقدار مساوی از عرض/ارتفاع موجود اشغال کنید. تمام ستون‌ها را در یک طرح‌بندی چند ستونی، حتی اگر حاوی مقدار متفاوتی از محتوا باشند، با ارتفاع یکسانی تنظیم کنید. ویژگی‌های Flexbox ممکن است راه‌حل مناسبی برای نیازهای طرح‌بندی یک بعدی شما باشد. بیایید عمیق‌تر بررسی کنیم و بفهمیم!

معرفی یک مثال ساده

در این مقاله، شما مجموعه‌ای از تمرین‌ها را انجام خواهید داد تا به شما در درک نحوه کار flexbox کمک کند. برای شروع، باید یک کپی محلی از HTML و CSS ایجاد کنید. آن را در یک مرورگر مدرن (مانند فایرفاکس یا کروم) بارگذاری کنید و نگاهی به کد در ویرایشگر کد خود بیندازید. همچنین می‌توانید روی دکمه "پخش" کلیک کنید تا آن را در محیط بازی باز کنید.

HTML

CSS

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

مشخص کردن عناصری که باید به عنوان flexbox طرح‌بندی شوند

برای شروع، باید انتخاب کنیم که کدام عناصر به صورت جعبه‌های انعطاف‌پذیر نمایش داده شوند. برای انجام این کار، مقدار خاصی برای نمایش (display) روی عنصر والد عناصری که می‌خواهید روی آنها تأثیر بگذارید، تنظیم می‌کنیم. در این مورد، می‌خواهیم عناصر را نمایش دهیم، بنابراین این مقدار را روی تنظیم می‌کنیم:

CSS

این باعث می‌شود که عنصر به یک ظرف flex تبدیل شود و فرزندانش به آیتم‌های flex تبدیل شوند. این شکلی است که به نظر می‌رسد: این اعلان واحد هر آنچه را که نیاز داریم به ما می‌دهد. باورنکردنی است، درست است؟ ما یک طرح‌بندی ستونی چندگانه با ستون‌های هم‌اندازه داریم و ستون‌ها همگی ارتفاع یکسانی دارند. دلیل این امر این است که مقادیر پیش‌فرض داده شده به آیتم‌های flex (فرزندان ظرف flex) برای حل مشکلات رایجی مانند این تنظیم شده‌اند. بیایید خلاصه‌ای از آنچه در اینجا اتفاق می‌افتد را مرور کنیم. اضافه کردن مقدار display از flex به یک عنصر، آن را به یک ظرف flex تبدیل می‌کند. ظرف از نظر نحوه تعامل با بقیه صفحه، به عنوان محتوای سطح Block نمایش داده می‌شود. هنگامی که عنصر به یک ظرف flex تبدیل می‌شود، فرزندان آن به آیتم‌های flex تبدیل می‌شوند (و به صورت) چیدمان می‌شوند. شما می‌توانید ظرف را با استفاده از یک مقدار نمایش خارجی (مثلاً ) درون‌خطی کنید، که بر نحوه چیدمان خود ظرف در صفحه تأثیر می‌گذارد. مقدار نمایش قدیمی inline-flex، ظرف را نیز به صورت درون‌خطی نمایش می‌دهد. ما در این آموزش بر نحوه رفتار محتویات کانتینر تمرکز خواهیم کرد، اما اگر می‌خواهید تأثیر چیدمان درون‌خطی در مقابل چیدمان بلوکی را ببینید، می‌توانید نگاهی به مقایسه مقادیر در صفحه ویژگی نمایش بیندازید. بخش‌های بعدی با جزئیات بیشتری توضیح می‌دهند که آیتم‌های flex چه هستند و وقتی یک عنصر را به یک کانتینر flex تبدیل می‌کنید، چه اتفاقی درون آن می‌افتد.

The flex model

وقتی عناصر به صورت flex items طرح‌بندی می‌شوند، در امتداد دو محور قرار می‌گیرند:

- محور اصلی، محوری است که در جهت چیدمان آیتم‌های فلکس قرار دارد (مثلاً به صورت یک ردیف در صفحه یا یک ستون در پایین صفحه). شروع و پایان این محور، شروع اصلی و پایان اصلی نامیده می‌شوند. طول از لبه شروع اصلی تا لبه انتهای اصلی، اندازه اصلی است. - محور متقاطع، محوری است که عمود بر جهت چیدمان آیتم‌های فلکس قرار دارد. شروع و پایان این محور، شروع متقاطع و پایان متقاطع نامیده می‌شوند. طول از لبه شروع متقاطع تا لبه انتهای متقاطع، اندازه متقاطع است. - عنصر والدی که روی آن تنظیم شده است ( در مثال ما) کانتینر فلکس نامیده می‌شود. آیتم‌هایی که به صورت جعبه‌های انعطاف‌پذیر درون کانتینر فلکس قرار می‌گیرند، آیتم‌های فلکس نامیده می‌شوند (عناصر در مثال ما). این اصطلاحات را هنگام مرور بخش‌های بعدی در نظر داشته باشید. اگر در مورد هر یک از اصطلاحات استفاده شده دچار سردرگمی شدید، همیشه می‌توانید به آن مراجعه کنید.

ستون‌ها یا ردیف‌ها؟

Flexbox خاصیتی به نام flex-direction ارائه می‌دهد که جهت محور اصلی (جهت قرارگیری عناصر فرزند flexbox) را مشخص می‌کند. به طور پیش‌فرض، این خاصیت روی row تنظیم شده است که باعث می‌شود عناصر به صورت ردیفی و در جهتی که زبان پیش‌فرض مرورگر شما (از چپ به راست، در مورد مرورگر انگلیسی) کار می‌کند، قرار گیرند. سعی کنید عبارت زیر را به قانون خود اضافه کنید:

CSS

خواهید دید که این کار آیتم‌ها را دوباره در یک طرح ستونی قرار می‌دهد، دقیقاً مانند قبل از اضافه کردن هرگونه CSS. قبل از ادامه، این تعریف را از مثال خود حذف کنید. همچنین می‌توانید با استفاده از مقادیر row-reverse و column-reverse، آیتم‌های flex را در جهت معکوس طرح‌بندی کنید. با این مقادیر نیز آزمایش کنید!

بسته بندی

یکی از مشکلاتی که وقتی عرض یا ارتفاع ثابتی در طرح‌بندی خود دارید، پیش می‌آید این است که در نهایت، فرزندان flexbox شما از ظرف خود سرریز می‌شوند و طرح‌بندی را خراب می‌کنند. در مثال زیر، 5 داریم که جا نمی‌شوند، زیرا حداقل عرض آنها 400 پیکسل است، بنابراین یک پیمایش افقی وجود دارد. در اینجا می‌بینیم که فرزندان واقعاً از کانتینر خود خارج می‌شوند. به طور پیش‌فرض، مرورگر سعی می‌کند اگر flex-direction روی row تنظیم شده باشد، تمام آیتم‌های flex را در یک ردیف یا اگر flex-direction روی column تنظیم شده باشد، در یک ستون قرار دهد. یکی از راه‌های رفع این مشکل، اضافه کردن تعریف زیر به قانون است:

CSS

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

خلاصه‌سازی جریان flex

در این مرحله، شایان ذکر است که یک اختصار برای flex-direction و flex-wrap وجود دارد: flex-flow. بنابراین، برای مثال، می‌توانید جایگزین کنید

CSS

اندازه‌بندی انعطاف‌پذیر آیتم‌های flex

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

CSS

این یک مقدار تناسب بدون واحد است که مشخص می‌کند هر آیتم فلکس در مقایسه با سایر آیتم‌های فلکس، چه مقدار فضای موجود در امتداد محور اصلی را اشغال خواهد کرد. در این حالت، ما به هر عنصر مقدار یکسانی (مقدار ۱) می‌دهیم، به این معنی که همه آنها مقدار مساوی از فضای خالی باقی مانده پس از تنظیم ویژگی‌هایی مانند padding و margin را اشغال می‌کنند. این مقدار به طور متناسب بین آیتم‌های فلکس تقسیم می‌شود: دادن مقدار ۴۰۰۰۰۰ به هر آیتم فلکس دقیقاً همان اثر را خواهد داشت. حالا قانون زیر را زیر قانون قبلی اضافه کنید:

CSS

حالا وقتی صفحه را رفرش می‌کنید، می‌بینید که سوم دو برابر دو تای دیگر از عرض موجود را اشغال می‌کند. اکنون در مجموع چهار واحد تناسب در دسترس است (زیرا ۱ + ۱ + ۲ = ۴). دو آیتم flex اول هر کدام یک واحد دارند، بنابراین هر کدام ۱/۴ فضای موجود را اشغال می‌کنند. آیتم سوم دو واحد دارد، بنابراین ۲/۴ (یا نصف) فضای موجود را اشغال می‌کند. همچنین می‌توانید حداقل اندازه را در مقدار flex مشخص کنید. سعی کنید قوانین article موجود خود را به این صورت به‌روزرسانی کنید:

CSS

این اساساً بیان می‌کند که «ابتدا به هر آیتم فلکس ۱۰۰ پیکسل از فضای موجود داده می‌شود. پس از آن، بقیه فضای موجود بر اساس واحدهای تناسب به اشتراک گذاشته می‌شود.» شما تفاوت در نحوه اشتراک‌گذاری فضا را مشاهده خواهید کرد. تمام آیتم‌های flex حداقل عرض ۱۰۰ پیکسل دارند که با استفاده از 'flex' تنظیم می‌شوند. مقدار flex برای دو آیتم flex اول ۱ و برای آیتم سوم ۲ است. این کار فضای باقی‌مانده در کانتینر flex را به ۴ واحد تناسبی تقسیم می‌کند. یک واحد به هر یک از دو آیتم flex اول و ۲ واحد به آیتم flex سوم اختصاص داده می‌شود و آیتم flex سوم را عریض‌تر از دو آیتم دیگر که عرض یکسانی دارند، می‌کند. ارزش واقعی flexbox را می‌توان در انعطاف‌پذیری/واکنش‌گرا بودن آن مشاهده کرد. اگر اندازه پنجره مرورگر را تغییر دهید یا عنصر دیگری اضافه کنید، طرح‌بندی به خوبی کار می‌کند.

flex: خلاصه‌نویسی در مقابل طولانی‌نویسی

flex یک ویژگی مختصرنویسی است که می‌تواند تا سه مقدار مختلف را مشخص کند: - مقدار تناسب بدون واحد که در بالا مورد بحث قرار دادیم. این مقدار را می‌توان به طور جداگانه با استفاده از ویژگی طولانی‌نویسی flex-grow مشخص کرد. - مقدار تناسب بدون واحد دوم، flex-shrink، که زمانی که آیتم‌های flex از ظرف خود سرریز می‌شوند، وارد عمل می‌شود. این مقدار مشخص می‌کند که یک آیتم چقدر کوچک می‌شود تا از سرریز جلوگیری شود. این یک ویژگی کاملاً پیشرفته flexbox است و ما در این مقاله بیشتر به آن نمی‌پردازیم. - مقدار حداقل اندازه که در بالا مورد بحث قرار دادیم. این مقدار را می‌توان به طور جداگانه با استفاده از مقدار طولانی‌نویسی flex-basis مشخص کرد. ما توصیه می‌کنیم از ویژگی‌های flex طولانی‌نویسی استفاده نکنید، مگر اینکه واقعاً مجبور باشید (مثلاً برای لغو چیزی که قبلاً تنظیم شده است). آنها منجر به نوشتن کد اضافی زیادی می‌شوند و می‌توانند تا حدودی گیج‌کننده باشند.

تراز افقی و عمودی

همچنین می‌توانید از ویژگی‌های flexbox برای ترازبندی آیتم‌های flex در امتداد محور اصلی یا عرضی استفاده کنید. بیایید این موضوع را با بررسی یک مثال جدید بررسی کنیم:

HTML

CSS

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

CSS

صفحه را رفرش کنید و خواهید دید که دکمه‌ها اکنون به خوبی از نظر افقی و عمودی در مرکز قرار گرفته‌اند. ما این کار را از طریق دو ویژگی جدید انجام داده‌ایم. آیتم‌های flex با تنظیم ویژگی align-items روی center در مرکز محور متقاطع قرار می‌گیرند. آیتم‌های flex با تنظیم ویژگی justify-content روی space-around به طور مساوی در امتداد محور اصلی قرار می‌گیرند. ویژگی align-items محل قرارگیری آیتم‌های flex روی محور متقاطع را کنترل می‌کند. - به طور پیش‌فرض، مقدار normal که در flexbox مانند stretch عمل می‌کند. این مقدار، تمام آیتم‌های flex را برای پر کردن والد در جهت محور متقاطع می‌کشد. اگر والد اندازه ثابتی در جهت محور متقاطع نداشته باشد، تمام آیتم‌های flex به اندازه بلندترین (یا عریض‌ترین) آیتم flex، بلند (یا پهن) می‌شوند. به این ترتیب، مثال اول ما به طور پیش‌فرض ستون‌هایی با ارتفاع برابر داشت. - مقدار center که در کد بالا استفاده کردیم باعث می‌شود آیتم‌ها ابعاد ذاتی خود را حفظ کنند، اما در امتداد محور متقاطع در مرکز قرار گیرند. به همین دلیل است که دکمه‌های مثال فعلی ما به صورت عمودی در مرکز قرار گرفته‌اند. - همچنین می‌توانید مقادیری مانند flex-start، self-start یا start و flex-end، self-end یا end داشته باشید که به ترتیب همه آیتم‌ها را در ابتدا و انتهای محور متقاطع تراز می‌کنند. مقادیر خط پایه، آیتم‌های فلکس را بر اساس خط پایه‌شان تراز می‌کنند؛ اساساً پایین هر آیتم فلکس، اولین خط متن، با پایین اولین خط عنصری که بیشترین فاصله را بین شروع متقاطع و آن خط پایه دارد، تراز می‌شود. برای جزئیات کامل به align-items مراجعه کنید. شما می‌توانید با اعمال ویژگی align-self به آیتم‌های فلکس، رفتار align-items را برای آنها لغو کنید. به عنوان مثال، سعی کنید موارد زیر را به CSS خود اضافه کنید:

CSS

نگاهی به تأثیر این مورد بیندازید و پس از اتمام کار، دوباره آن را حذف کنید. justify-content محل قرارگیری آیتم‌های flex روی محور اصلی را کنترل می‌کند. مقدار پیش‌فرض آن normal است که مانند start عمل می‌کند و باعث می‌شود همه آیتم‌ها در ابتدای محور اصلی قرار گیرند. می‌توانید از end یا flex-end برای قرار دادن آنها در انتها استفاده کنید. مقادیر left و right بسته به جهت حالت نوشتاری، مانند start یا end عمل می‌کنند. center نیز مقداری برای justify-content است. این مقدار باعث می‌شود آیتم‌های flex در مرکز محور اصلی قرار گیرند. مقداری که در بالا استفاده کردیم، space-around، مفید است - همه آیتم‌ها را به طور مساوی در امتداد محور اصلی با کمی فضای خالی در هر دو انتها توزیع می‌کند. مقدار دیگری به نام space-between وجود دارد که بسیار شبیه به space-around است، با این تفاوت که هیچ فضایی در هر دو انتها باقی نمی‌گذارد. ویژگی justify-items در طرح‌بندی‌های flexbox نادیده گرفته می‌شود. ما شما را تشویق می‌کنیم که قبل از ادامه، با این مقادیر بازی کنید تا ببینید چگونه کار می‌کنند.

ترتیب دهی به آیتم های فلکس

فلکس‌باکس همچنین قابلیتی برای تغییر ترتیب چیدمان آیتم‌های فلکس بدون تأثیر بر ترتیب منبع دارد. این کار دیگری است که انجام آن با روش‌های سنتی چیدمان غیرممکن است. سعی کنید CSS زیر را به کد نمونه نوار دکمه خود اضافه کنید:

CSS

صفحه را رفرش کنید و خواهید دید که دکمه «لبخند» به انتهای محور اصلی منتقل شده است. بیایید کمی بیشتر در مورد نحوه کار این موضوع صحبت کنیم: - به طور پیش‌فرض، همه آیتم‌های فلکس دارای مقدار ترتیب ۰ هستند. - آیتم‌های فلکس با مقادیر ترتیب مشخص‌شده بالاتر، در ترتیب نمایش، دیرتر از آیتم‌هایی با مقادیر ترتیب پایین‌تر ظاهر می‌شوند. - آیتم‌های فلکس با مقدار ترتیب یکسان، در ترتیب منبع خود ظاهر می‌شوند. بنابراین اگر چهار آیتم داشته باشید که مقادیر ترتیب آنها به ترتیب ۲، ۱، ۱ و ۰ تنظیم شده باشد، ترتیب نمایش آنها چهارم، دوم، سوم و سپس اول خواهد بود. - مورد سوم بعد از مورد دوم ظاهر می‌شود زیرا مقدار ترتیب یکسانی دارد و در ترتیب منبع بعد از آن قرار دارد. می‌توانید مقادیر ترتیب منفی را تنظیم کنید تا آیتم‌ها زودتر از آیتم‌هایی که مقدار آنها ۰ است ظاهر شوند. به عنوان مثال، می‌توانید با استفاده از قانون زیر، دکمه «سرخ شدن» را در ابتدای محور اصلی ظاهر کنید:

CSS

در حالی که می‌توانید ترتیب را با استفاده از order تغییر دهید، ترتیب تب‌بندی مانند ترتیب کد باقی می‌ماند. تغییر ترتیب عناصر قابل فوکوس می‌تواند بر قابلیت استفاده برای کاربران کیبورد شما تأثیر منفی بگذارد!

flexbox تو در تو

می‌توان با flexbox طرح‌بندی‌های نسبتاً پیچیده‌ای ایجاد کرد. کاملاً اشکالی ندارد که یک آیتم flex را به عنوان یک ظرف flex نیز تنظیم کنید، به طوری که فرزندان آن نیز مانند جعبه‌های انعطاف‌پذیر طرح‌بندی شوند. این طرح‌بندی پیچیده چند آیتم flex دارد که flex containers نیز هستند. کد HTML این طرح‌بندی نسبتاً سرراست است. ما یک عنصر داریم که شامل سه است. سوم شامل سه و اول شامل پنج است:

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

CSS

در مرحله بعد، ما برخی مقادیر flex را روی خود ها تنظیم می‌کنیم. به قانون دوم در اینجا توجه ویژه داشته باشید: ما سوم را طوری تنظیم می‌کنیم که فرزندانش نیز مانند آیتم‌های flex چیدمان شوند، اما این بار آنها را مانند یک ستون چیدمان می‌کنیم.

CSS

در مرحله بعد، اولین را انتخاب می‌کنیم. ابتدا از flex: 1 100px; استفاده می‌کنیم تا حداقل ارتفاع 100 پیکسل را به آن بدهیم، سپس فرزندان آن (عناصر ) را طوری تنظیم می‌کنیم که مانند آیتم‌های flex چیدمان شوند. در اینجا آنها را در یک ردیف قرار می‌دهیم و در مرکز فضای موجود تراز می‌کنیم، همانطور که با مثال دکمه‌های تکی که قبلاً دیدیم انجام دادیم.

CSS

در نهایت، اندازه‌ای برای دکمه تعیین می‌کنیم. این بار با دادن مقدار flex برابر با ۱ auto. این کار جلوه بسیار جالبی دارد که اگر سعی کنید عرض پنجره مرورگر خود را تغییر دهید، خواهید دید. دکمه‌ها تا جایی که می‌توانند فضا اشغال می‌کنند. تا جایی که راحت باشند، در یک خط قرار می‌گیرند؛ فراتر از آن، به یک خط جدید منتقل می‌شوند.

CSS