آموزش flexbox در css

یکی از مشکلات متعددی که ممکن است هر طراح وب با آن روبرو شود نحوه چیدمان آیتم‌ها کنار یکیدیگر می‌باشد که با استفاده از تکنولوژی فلکس باکس می‌تواند کار را بسیار ساده کند. فلکس باکس (FlexBox) در css یکی از روش‌های محبوب طراحی وب در سال های اخیر بوده است که در ادامه مطلب سعی داریم آموزش FlexBox در CSS به صورت کامل و رایگان با زبانی ساده به شما عزیزان ارائه دهیم. توصیه می‌کنیم تا انتهای مطلب با ما همراه باشید.

فلکس باکس یا flexbox چیست؟

تکنولوژی Flexible Box یا نام اختصاری FlexBox یکی از ساده‌ترین و کاربردی‌ترین ابزار برای چیدمان آیتم‌ها به‌شمار می‌آید که با استفاده از آن کار طراحان وب را بسیار ساده کرده است. باتوجه به مشکلات فراوان در چنیش آیتم‌ها در ورژن‌های قدیمی Css این ماژول به نسخه جدید Css3 اضافه شد. در واقع ماژول FlexBox توانسته در طراحی‌ صفحات واکنش‌گرا یا همان ریسپانسیو (Responsive) بسیار خوب عمل کند. این ابزار با چیدن عناصر به‌صورت افقی و عمودی در قالب نگه‌ دارنده (Flex Container)، می‌تواند المان‌ها را با اندازه خودکار تنظیم کند تا دیگر مشکلات ویژگی Float یا Whitespaceبوجود نیاید.

مزایای استفاده از flexbox

همانطور که اشاره شد تکنولورژی فلکس باکس یکی از ابزارهای بسیار کاربردی برای طراحان وب محسوب می شود؛ به طوری که با استفاده از این ابزار علاوه بر کدنویسی استاندارد و بهینه‌ امکان اجرا در مرورگرهای مختلف فراهم می‌کند. ماژول flexbox نسبت به ابزار قدیمی float ویژگی و امکانات بهتری در اختیار طراحان وب قرار می دهد و می توان بسیار ساده المان های مدنظر خود در به سادگی چیدمان کرد.

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

• امکان ایجاد المان‌ها در کنار یکدیگر به‌صورت سطری بدون نیاز به تنظیم سایز دقیق پهنا و هم‌تراز سازی نسبت به المان نگهدارنده
• امکان تغییر دادن ترتیب المان‌ها
• اگر فضای کافی برای المان‌های در یک سطر وجود نداشته باشد به سادگی عنصر آخر به صورت خودکار در سطر بعد جای می‌گیرد. همچنین می‌توان اندازه‌ی یک عنصر را نسبت به اندازه‌ی عنصر نگهدارنده به‌صورت واکنش‌گرا ایجاد کرد.
• چیدمان المان را می‌توان به‌صورت معکوس قرار داد.

آشنایی با دستورات فلکس باکس در Css3

برای کار کردن با تکنولوژی flexbox در ادامه به معرفی دستورات فلکس باکس می‌پردازیم و شما را با دستورات زیر آشنا خواهیم کرد:

• ویژگی Flex-Direction در Css3
• ویژگی Justify-Content در Css3
• ویژگی Align-Content در Css3
• ویژگی Align-Items در Css3
• ویژگی Flex-Wrap در Css3
• ویژگی Flex-Grow در Css3
• ویژگی Flex-Shrink در Css3
• ویژگی Flex-Basis در Css3
• ویژگی Flex-Flow در Css3

در ابتدا برای اینکه بتوانید از فلکس باکس استفاده کنید باید خاصیت display: flex به المان مدنظر خود فعال کنید. در این صورت عناصر فرزند به‌صورت سطری مرتب می‌شوند.

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

1. ویژگی Flex-Direction در Css3

با کمک دستور flex-directinon می‌توانید جهت نمایش المان‌ها را تعیین کنید. این دستور دارای چهار مقادیر زیر است:

• Row: نمایش عناصر بصورت سطری
• Row-Reverse: نمایش برعکس عناصر بصورت سطری
• Column : نمایش عناصر بصورت ستونی
• Column-Reverse : نمایش برعکس عناصر بصورت ستونی

2. ویژگی Justify-Content در Css3

با استفاده از این خاصیت می‌توانید المان‌ها را به‌صورت سطری ترازبندی کنید. این دستور دارای 6 مقادیر زیر است:

• Flex-Start:
• Flex-End: عناصر را در قسمت پایانی باکس قرار می‌دهد
• Center: عناصر را در قسمت میانی باکس قرار می‌دهد
• Space-Between: عناصر را با فاصله مشخص در بین المان‌ها ایجاد میکند
• Space-Around: علاوه‌بر فاصله بین عناصر در اطراف عناصر هم ایجاد میکند

3. ویژگی Flex-wrap در Css3

خاصیت flex-wrap این امکان را به شما می‌دهد در صورتی که المان‌ها در یک سطر جا نشد در سطر بعدی قرار بگیرد. این دستور دارای 3 مقدار زیر است:

• Nowrap گزینه پیش فرض
• Wrap عناصر را شکسته و به خط بعدی میروند
• Wrap-Reverse عناصر کسته و بصورت برعکس نمایش داده می‌شوند

4. ویژگی Align-Content در Css3

با کمک دستور align-content می‌توان زمانی که عناصر درون باکس بیشتر از یک سطر هستند را به‌صورت عمودی ترازبندی کند. دقت داشته باشید که زمانی این ویژگی کار می‌کند که از خاصیت Flex-wrap: Wrap استفاده شده باشد. این دستور دارای 6 مقدار زیر است:

• Stretch
• Center
• Flex-Start
• Flex-End
• Space-Between
• Space-Around

5. ویژگی Align-Items در Css3

با استفاده از ویژگی align-items می‌توان المان‌ها را به‌صورت عمودی ترازبندی کرد. این دستور دارای 5 مقدار زیر است:

• Stretch:
• Center: عناصر بصورت ستونی در وسط باکس قرار می‌گیرد
• Flex-Start: عناصر بصورت عمودی در قسمت ابتدایی باکس قرار می‌گیرد
• Flex-End: عناصر بصورت عمودی در قسمت پایانی باکس قرار می‌گیرد
• BaseLine: عناصر به‌صورت پایه ترازبندی می کند

6. ویژگی Flex-Grow در Css3

خاصیت flex-grow دارای مقدار عددی می‌باشد که قابلیت بزرگ شدن المان را مشخص می‌کند. برای مثال اگر 3 باکس را در کنار هم باشند مقدار flex-grow یکی از آیتم‌ها را برابر مقدار 2 قرار دهیم و دیگر آیتم‌ها flex-grow را برابر 1 بگذاریم؛ flex-grow آیتمی که مقدار 2 دارد دو برابر دیگر آیتم‌ها می‌شود.

<div>

  <div style="flex-grow: 1">1</div>

  <div style="flex-grow: 2">2</div>

  <div style="flex-grow: 1">3</div>

</div>

7. ویژگی Flex-Shrink در Css3

این خاصیت مانند دستور flex-grow مقدار عددی دارد و برعکس ویژگی flex-grow رفتار می‌کند. با کمک این دستور می‌توان کوچکترین اندازه برای عنصر تعیین کرد.

8. ویژگی Flex-Basis در Css3

با استفاده از این دستور می‌توان برای تنظیم اندازه آیتم‌ها استفاده کرد. مقداری که ویژگی flex-basic می‌تواند واحدهای درصد، پیکسل و... باشد.

نکته: بد نیست بدانید که خاصیت‌های flex-grow، flex-shrink، flex-basis می‌توان در یک دستور کوتاه به نام flex: grow shrink basis مشخص کرد. (برای مثال flex: 1 1 600px)

9. ویژگی Flex-Flow در Css3

برای کوتاه کردن کدنویسی می‌توان دو ویژگی flex-direction و flex-wrap با هم ترکیب و با دستور flex-flow مقدار آن را مشخص کرد.