هر عنصر HTML یک جعبه مستطیل شکل است. هر جعبه دارای یک ارتفاع و عرض مشخصی است. به این ترتیب میتوانید اندازه آن را کم یا زیاد کنید. CSS برای استایل دادن به عناصر HTML استفاده می‌شود تا زیبا و تزئین شده به نظر برسند. CSS با هر عنصر از نظر مدل جعبه خود رفتار می‌کند. بنابراین هر عنصر دارای padding، margin و border نیز می‌باشد.
میتوانید از اینجا درباره مدل CSS BOX بیشتر بیاموزید.
Box Layout به معنای قرار دادن یک باکس در صفحه است. بنابراین ممکن است بخواهید یک عنصر را به صورت افقی یا عمودی قرار دهید یا ممکن است بخواهید عنصر را به موقعیت دیگری در صفحه منتقل کنید. چیدمان صفحه مهمترین کاری است که ظاهر کلی صفحه را تعیین می‌کند.
CSS روش‌های زیادی برای ترازبندی یک باکس دارد. میتوانید float ها و خصوصیات موقعیت را انتخاب کنید یا میتوانید با استفاده از margin و padding تراز کنید. اما تغییر موقعیت عنصری به دلخواه همیشه آسان نیست. توسعه دهندگان همواره در مرکزدهی یک عنصر به صورت افقی یا عمودی مشکل داشته‌اند. اگر سعی کنید از float استفاده کنید، خواهید دید که به کار بیشتری احتیاج دارد و برای قرار دادن عنصر کد اضافی به شما می دهد. پس راه چاره چیست؟
در اینجا روش مدرن CSS Flex Box وجود دارد. پس از استفاده از Flex Box برای اولین بار، مشکلاتی را که با چیدمان خود مواجه بوده‌اید فراموش خواهید کرد. شما طرح خود را با خطوط کد کمتر و خیلی سریع خواهید ساخت.
اکنون پس از داشتن Flex Box نیازی به نگرانی در مورد تک تک عناصر موجود در کانتینر خود ندارید. آنچه شما نیاز دارید این است که فقط یک یا دو خط کد اضافه کنید و پیش بروید.
محبوب‌ترین موارد استفاده از Flexbox چیست؟
برای تراز کردن مطالب خود میتوانید از Flex Box تقریبا در هر جای وبسایت خود استفاده کنید، اما به نظر من کاربرد آن در قسمت‌های خاصی از صفحه بیش از سایر موارد مفیدتر است.
1 – Navigation Bar
منوی پیمایش عمدتا یک نوار افقی یا عمودی در بالا یا کنار صفحه است که دارای لینک‌هایی به سایر قسمت‌های سایت می‌باشد. میتوانید کانتینری برای آن ایجاد کنید و Flex Box را روی آن اعمال کنید تا بتوانید موارد آن را در هر کجا که برای طرح بندی صفحه شما مناسب باشد، منتقل کنید.
2 – Footer
پاورقی یک وبسایت بیشتر شامل اطلاعات تماس، لوگو و برخی از لینک‌ها به قسمت‌های دیگر سایت است. میتوانید محتوای پاورقی خود را با کمکFlex Box نیز تراز کنید.
3 – Horizontal Alignment
شما میتوانید عناصر کانتینر خود را هر کجا که دوست دارید بر روی خط افقی تراز کنید و بتوانید در آن‌ها فضای بیشتری ایجاد کنید.
4 – Vertical Alignment
اغلب موارد نیاز به قرارگیری عناصر به صورت عمودی است، بنابراین دستیابی به آن با Flex Box راهی بسیار آسان است. شما فقط باید یک خط به CSS خود اضافه کنید و همه کارهای آن قبلا انجام شده است.
5 – Re-Ordering Elements
Flex Box دارای عملکردی است که به شما امکان می‌دهد ترتیب عناصر خود را در یک کانتینر مرتب کنید. همچنین میتوانید ترتیب هر عنصری را که دوست دارید تغییر دهید.
Flex Box چگونه کار می‌کند؟
CSS Flex Box یک مدل دارد و درک آن برای استفاده موثر در پروژه‌های شما بسیار مهم است. در FlexBox دو محور وجود دارد. یکی محور اصلی و دیگری محور Cross نامیده می‌شود. بنابراین با استفاده از این دو بعد میتوانید عناصر خود را در هر کجا که نیاز دارید قرار دهید.
محور اصلی
محور اصلی می‌تواند افقی یا عمودی باشد. بنابراین برخی از خصوصیات خاص را می‌توان در داخل کانتینر فقط برای قرار دادن موارد در محور اصلی استفاده کرد.
محور Cross
محور Cross نیز می‌تواند افقی یا عمودی باشد. بنابراین برخی از خصوصیات فقط برای استفاده از این بعد وجود دارد.
خصوصیات Flex Box فقط برای کانتینرها
اکنون ویژگی‌های Flex Box را توضیح می‌دهیم که فقط در داخل کانتینر برای چیدمان اجزای آن استفاده می‌شود.
Flex-direction
بنابراین اکنون می‌دانیم که روی دو محور کار خواهیم کرد. ما خاصیت flex-direction را برای تعریف محور خود را داریم. flex-direction به طور پیش فرض ردیفی است بنابراین به این معنی است که محور اصلی ما در واقع افقی است. با نوشتن column :flex-direction می‌توانیم محور اصلی خود را به حالت عمودی ببریم. همچنین می‌توانیم روی جهت معکوس سطر و ستون کار کنیم.
Flex-wrap
از این ویژگی برای تعیین اینکه آیا آیتم‌های ما باید در یک خط جدید قرار بگیرند استفاده می‌شود. زیرا کل فضای خط فعلی را پر می‌کنند. این ویژگی به طور پیش فرض ارزش پیچیدن ندارد. به این معنی که برای مواردی مجاز است که روی یک خط جدید قرار بگیرند. همچنین می‌تواند یک مقدار معکوس در ردیف به دست آورد، به این معنی که اکنون موارد بسته‌بندی می‌شوند اما با حالت معکوس.
Flex-flow
این یک ویژگی مختصر برای flex-flow و flex-wrap است. Wrap کردن ستونی را می‌توان به صورت flex-flow نوشت. بنابراین اولین مقدار در سمت چپ با flex-direction ارتباط دارد و آخرین مقدار flex-wrap را نشان می‌دهد.
Justify-content
این ویژگی برای قرار دادن موارد یک کانتینر در محور اصلی استفاده می‌شود. یک مقدار پیش فرض دارد که flex-start است. این بدان معنی است که همه موارد به طور پیش فرض در ابتدای کانتینر قرار دارند. این می‌تواند یک مرکز داشته باشد که به معنی وسط قرار دادن همه موارد در این محور است.
مقدار flex-end درصورتی که برای انتقال همه موارد به انتهای کانتینر مورد نیاز باشد قرار می‌گیرد. دو مقدار دیگر دارد که برای افزودن فضا به عناصر استفاده می‌شود. یک مقدار فاصله بین و دیگری فضای اطراف است. از فاصله بین برای افزودن فضای برابر بین همه عناصر و فضای اطراف برای فضای برابر در اطراف عناصر استفاده می‌شود.
Align-items
از ویژگی Align-items برای قرار دادن آیتم‌ها در محور عرضی استفاده می‌شود و در انجام کار ارزش زیادی دارد. مقدار پیش فرض آن flex-start است. همچنین می‌تواند مقداری برای انتقال آیتم‌ها به انتهای فلکس به دست آورد. مقدار flex-stretch زمانی تنظیم می‌شود که برای پوشاندن فضای باقی مانده در کانتینر مورد نیاز باشد. مقدار پایه به عناصر اجازه می‌دهد تا تراز شوند و خط مبنای آن‌ها نیز تراز شود.
Align-content
وقتی آیتم‌های زیادی در یک کانتینر دارید، این موارد با پیچیدن روی خطوط جدید شروع به شکل دادن خود به صورت خطی می‌کنند. از ویژگی Align-content برای تراز کردن سطرها و افزودن فضا در آن‌ها استفاده می‌شود و خواص زیادی دارد. تمام مقادیر آن همان ترازها هستند، اما تفاوت در این است که این مقادیر فقط برای خطوط آیتم‌ها کار می‌کنند تا برای خود آیتم‌ها.
برای یادگیری بیشتر ابزارها و فریمورک‌های css flexbox به این لینک مراجعه کنید.
امیدوارم این مقاله برایتان مفید واقع شود. اگر سوال یا نظری دارید، آن را در بخش زیر با ما در میان بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید