flexbox چیست؟

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

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

Flexbox چیست؟

Flexbox مخفف کلمه Flexible Box Layout است؛ فلکس باکس نوعی ابزار CSS است که طراحی طرح‌بندی‌های پیچیده را در صفحات وب ساده می‌کند. در اصل فلکس باکس راه سازگار برای چیدمان عناصر و مدیریت فضای درون کانتینری مشخص‌شده ارائه می‌دهد.

مدل Flexbox به صورت دو طرفه کار می‌کند و به شما امکان می‌دهد عناصر را به صورت افقی، عمودی یا هر دو به طور هم‌زمان سازمان‌دهی کنید. این تطبیق‌پذیری انعطاف‌پذیری را در طراحی چیدمان ارائه می‌دهد. استفاده از Flexbox چندین مزیت را نسبت به روش‌های سنتی مانند طرح‌های CSS floats و موقعیت‌یابی (positioning) به همراه دارد:

• هم ترازی ساده و مرکزیت عناصر از طریق ویژگی‌هایی مانند justify-content و align-item.
• ایجاد ساده طرح‌بندی‌های ریسپانسیو یا واکنشگرا بدون نیاز به پرس‌وجوهای رسانه‌ای (media queries) گسترده.
• ترتیب مجدد آسان عناصر بدون تغییر ساختار HTML.
• ایجاد یکپارچه ستون‌ها با ارتفاع مساوی بدون عناصر HTML اضافی یا تصاویر پس‌زمینه.

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

محور اصلی و محور متقاطع در Flexbox چیست؟

هر کانتینر فلکس مجموعه‌ای از عناصر با خاصیت نمایش انعطاف‌پذیر (display property of flex) یا خاصیت درون‌خطی (inline-flex) است که دارای محور اصلی (main axis) و محور متقاطع (cross axis) هستند. بسته به مقدار جهت فلکس، محور اصلی می‌تواند افقی یا عمودی باشد.

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

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

کانتینرها و اقلام Flex چیست؟

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

برای استفاده مؤثر از ویژگی‌های Flexbox، باید با دستورات flexbox ویژگی display را روی یک عنصر اعمال کرده و آن را به عنوان flex یا inline-flex تنظیم کنید.

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

<section class="container">
            <div>Flex Item 1</div>
 <div>Flex Item 2</div>
 <div>
 <p>This paragraph is not a flex item</p>
 </div>
</section>

با اضافه کردن CSS:

.container {
 display: flex;
}

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

درک مفاهیم flex و inline-flex

حال که فهمیدیم که Flexbox چیست و با اقلام و کانتینر آشنا شدیم به بررسی نحوه ایجاد کانتینرها می‌پردازیم. شما دو گزینه برای ایجاد یک کانتینر فلکس دارید: flex و inline-flex. تفاوت در نحوه تعامل آن‌ها با عناصر است.

flex

استفاده از flex باعث می‌شود که کانتینر فلکس مانند عنصری در سطح بلوک رفتار کند. با این کار عنصر کل عرض موجود عنصر والد خود را اشغال می‌کند. هر عنصری که از آن پیروی کرده یا به اصطلاح فرزند آن شود نیز در خط جدیدی شروع می‌شود. مثال زیر برای بیان این هدف است:

<button>Button One</button>

<section class="container">
            <div id="red"></div>
            <div id="gold"></div>
            <div id="green"></div>
</section>

<button>Button Two</button>

با اعمال CSS:

.container {
            display: flex;
}

section بالا به نوعی کانتینر فلکس تبدیل می‌شود که از خط جدیدی شروع می‌شود و عرض موجود والد خود را پر می‌کند.

عنصرcontainer کل عرض موجود بدنه (عنصر اصلی آن) را اشغال می‌کند.

display: inline-flex

هنگامی‌که ویژگی display را روی inline-flex تنظیم می‌کنید، کانتینر flex مانند نوعی عنصر در سطح درون‌خطی رفتار می‌کند. این بدان معنی است که می‌تواند در کنار سایر عناصر درون‌خطی، مانند دکمه‌ها، در جریان محتوا قرار گیرد. در مثال قبلی، تغییر صفحه‌نمایش از flex به inline-flex نحوه چیدمان عناصر را به صورت تغییر می‌دهد:

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

ویژگی‌های کانتینر فلکس باکس چیست؟

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

1 | flex-direction

جهت محور اصلی که اقلام فلکس در امتداد آن قرارگرفته‌اند را تعیین می‌کند.

2 | flex-wrap

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

3 | flex-flow

نوعی ویژگی مختصر که ترکیبی از جهت فلکس و انعطاف‌پذیری است.

4 | justify-content

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

5 | align-item

اقلام فلکس را در امتداد محور متقاطع، در داخل کانتینر تراز می‌کند.

6 | align-content

تراز خطوط فلکس را هنگامی‌که فضای اضافی در امتداد محور متقاطع وجود دارد را کنترل می‌کند.

7 | place-content

نوعی ویژگی مختصر برای ترکیب align-content و justify-content است.

تا به اینجا فهمیدیم که مهم‌ترین ویژگی‌های کانتینر Flexbox چیست، در ادامه ویژگی‌های اقلام یا آیتم‌های فلکس باکس را مورد بررسی قرار می‌دهیم.

ویژگی‌های آیتم Flexbox چیست؟

علاوه بر ویژگی‌های کانتینر فلکس، Flexbox ویژگی‌هایی را ارائه می‌دهد که می‌توانید برای هر یک از اقلام فلکس جداگانه اعمال کنید. این ویژگی‌ها عبارت‌اند از:

1 | Order

ترتیب ظاهر شدن اقلام فلکس را در کانتینر فلکس کنترل می‌کند.

2 | align-self

تراز تنظیم‌شده توسط کانتینر را برای آیتم فلکس خاص لغو می‌کند.

3 | flex-grow

مشخص می‌کند که یک آیتم flex چقدر می‌تواند نسبت به سایر موارد رشد کند.

4 |  flex-shrink

توانایی یک آیتم فلکس را برای کوچک شدن در صورت لزوم تعیین می‌کند.

5 | flex-basis

اندازه اولیه یک آیتم flex را قبل از توزیع فضای موجود تنظیم می‌کند.

6 | flex

یک ویژگی مختصر که ترکیبی از flex-grow، flex-shrink و flex-bases است.

کار با فلکس باکس به صورت عملی

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

باید به این نکته اشاره‌کنیم که Flexbox نوعی سیستم چیدمان تک‌بعدی است که به ما امکان می‌دهد عناصر را در ردیف یا ستونی خاص مرتب کنیم. این امر نیاز به کارهای پیچیده CSS و استفاده بیش از حد از ویژگی‌های CSS floats و موقعیت‌یابی (positioning) را از بین می‌برد.

برای استفاده از Flexbox، به سادگی نوعی عنصر کانتینر را با ویژگی «display: flex» تعیین کنید. تمام عناصر داخل این کانتینر به طور خودکار به آیتم‌های فلکس یا واکنشگرا تبدیل می‌شوند. به عنوان مثال، یک div را در نظر بگیرید که به عنوان کانتینری برای سه عنصر فرزند عمل می‌کند:

<div class="container">
 <div id="one">1</div>
 <div id="two">2</div>
 <div id="three">3</div>
</div>

Flexbox را روی کانتینر اعمال کنید:

.container{
 display: flex;
}

سپس می‌توانید جهت عناصر داخل کانتینر را با استفاده از flex-direction با گزینه‌هایی مانند row یا column تنظیم کنید. مثلاً:

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

کار بالا کنترل می‌کند که آیا اقلام به صورت افقی یا عمودی در کانتینر چیده شده‌اند.

ویژگی flex-direction در Flexbox چیست؟

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

بسته به جهت فلکس انتخاب شده، یک محور اصلی و یک محور متقاطع داریم. به عنوان مثال، هنگامی‌که flex-direction روی ردیف یا همان سطر تنظیم می‌شود، محور اصلی به صورت افقی اجرا می‌شود، در حالی که محور متقاطع به صورت عمودی اجرا خواهد شد. برعکس، هنگامی‌که flex-direction روی ستون تنظیم می‌شود، محور اصلی به صورت عمودی و محور متقاطع به صورت افقی اجرا می‌شود که تصویر زیر بیانگر این هدف است:

flex-wrap در فلکس باکس

یکی دیگر از ویژگی‌های مفید در فلکس باکس flex-wrap است؛ اما flex-wrap در Flexbox چیست و چه نقشی ایفا خواهد کرد؟ flex-wrap در اصل کنترل می‌کند آیا آیتم‌های flex می‌توانند در صورت کمبود فضای کافی به خط بعدی بروند یا خیر. می‌توانید flex-wrap را روی مقادیری مانند wrap، nowrap یا wrap-reverse تنظیم کنید:

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

Flexbox ویژگی‌های متعدد دیگری را برای ایجاد طرح‌بندی‌های چشمگیر ارائه می‌دهد. به عنوان مثال، می‌توانید ترتیب عناصر را تنظیم کنید، ترتیب آن‌ها را معکوس کرده رشد و انقباض آن‌ها را کنترل کنید و موارد دیگر.

ویژگی align در فلکس باکس چیست؟

یکی از نقاط قوت کلیدی Flexbox در قابلیت تراز کردن آن نهفته است. این شامل ویژگی‌هایی مانند align-self و justify-content است که کنترل دقیقی بر موقعیت اقلام در کانتینر فلکس می‌دهد.

سناریویی را در نظر بگیرید که در آن کانتینر div ما اکنون چهار عنصر را در خود جای داده است که هر کدام دارای عرض و ارتفاع یکسان هستند:

<div id="container">
 <div id="one">1</div>
 <div id="two">2</div>
 <div id="three">3</div>
 <div id="four">4</div>
</div>

برای تراز کردن این موارد در کانتینر، می‌توانیم از ویژگی align-self در CSS خود استفاده کنیم. این ویژگی به ما اجازه می‌دهد تا به صورت جداگانه تراز هر عنصر را تنظیم کنیم:

#one{
 align-self: flex-start | flex-end | center | stretch;
}

با align-self، می‌توانیم گزینه‌های تراز متفاوتی را برای هر آیتم مشخص کنیم، مانند تراز کردن یک آیتم در ابتدا، انتهای یا مرکز کانتینر یا گسترش آن برای پر کردن فضای موجود به صورت عمودی.

ویژگی justify در فلکس باکس؟

یکی دیگر از سؤالات رایجی که امکان دارد برای کاربران پیش آید سؤال در مورد ویژگی justify است؛ اما ویژگی justify در Flexbox چیست و دقیقاً چه کاری انجام می‌دهد؟ فرض کنید کانتینری با سه آیتم داریم و می‌خواهیم همه آن‌ها را با هم در داخل کانتینر تراز کنیم. برای رسیدن به این هدف، از ویژگی justify-content صورت زیر استفاده می‌کنیم:

.container{
 justify-content: flex-start | flex-end | center | space-between | space-around;
}

این ویژگی به ما این امکان را می‌دهد که اقلام را در امتداد محور اصلی کانتینر تراز کنیم، موقعیت آن‌ها را نسبت به لبه‌های کانتینر تنظیم کرده یا فضا را بین یا اطراف آن‌ها توزیع کنیم.

در مطالب ارائه شده بالا یاد گرفتیم که Flexbox چیست و ویژگی‌ها و عناصر آن چه چیزهایی هستند. اکنون اجازه دهید نگاهی کوتاه به CSS Grid بیندازیم و تفاوت‌های این سیستم‌های چیدمان را با Flexbox بررسی کنیم.

CSS Grid چیست؟

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

برای نشان دادن این موضوع، بیایید از قطعه HTML ارائه شده زیر استفاده کنیم:

<div class="container">
 <div id="one">1</div>
 <div id="two">2</div>
 <div id="three">3</div>
 <div id="four">4</div>
 <div id="five">5</div>
</div>

برای ایجاد یک کانتینر شبکه مانند یا همان Grid، به سادگی ویژگی «display: grid» را به عنصر بلوک موردنظر اعمال کرده و سپس تعداد سطر و ستون موردنظر را مشخص می‌کنیم.

برای ایجاد ردیف‌ها و ستون‌ها، به ترتیب از ویژگی‌های «grid-template-rows» و «grid-template-columns» استفاده کرده و مقادیری را مشخص خواهیم کرد که اندازه و چیدمان عناصر موجود در گرید یا طرح‌بندی شبکه را تعیین می‌کند:

grid-template-columns: 60px 60px;
grid-template-rows: auto;

مثال داده شده بالا نوعی پیکربندی شبکه‌ای با دو ستون ایجاد می‌کند که هر کدام 60 پیکسل در داخل کانتینر قرار دارند. با وجود پنج عنصر، سه ستون به دلیل ویژگی auto برای پر کردن کل کانتینر گسترش می‌یابد.

مشابه Flexbox، Grid ویژگی‌هایی را برای تراز کردن آیتم‌ها در کانتینر ارائه می‌دهد. به عنوان مثال، ویژگی justify-self نوعی آیتم Grid را در سلول خود در امتداد محور ردیف تراز می‌کند:

#one{
 justify-self: start | end | center | stretch;
}

برای درک بهتر، اولین عنصر را در کانتینر Grid در نظر بگیرید:

توجه به این نکته مهم است که justify-self تنها ویژگی هم‌ترازی موجود در Grid نیست. گزینه‌های دیگر عبارت‌اند از justify-content، justify-item، align-item و align-self. این تنوع گزینه‌های تراز در Grid انعطاف‌پذیری بیشتری را برای ایجاد طرح‌بندی‌های پیچیده و تراز کردن دقیق عناصر فراهم می‌کند.

ویژگی‌های مشترک گرید و Flexbox چیست؟

Flexbox و Grid، علیرغم تفاوت‌هایشان، ویژگی‌های مشترکی دارند که برای طرح‌بندی استفاده می‌شوند. وجود این ویژگی‌های مشترک مزیت قابل‌توجهی است زیرا آن‌ها جایگزین ساده‌تری برای روش چالش‌برانگیز قبلی برای طراحی چیدمان عناصر در صفحه هستند.

ویژگی‌هایی مانند justify-content، align-content، align-self و align-item بین Flexbox و Grid به اشتراک گذاشته می‌شود. این ویژگی‌ها امکان تراز و قرارگیری آسان عناصر در داخل ظروف را فراهم می‌کند. اکنون که متوجه شدیم این ویژگی‌ها چگونه کار می‌کنند، بیایید به تفاوت‌های آن‌ها بپردازیم و بهترین موارد استفاده را برای هر ابزار طرح‌بندی بررسی کنیم.

تفاوت گرید و فلکس باکس چیست؟

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

CSS Grid به عنوان نوعی راه‌حل جدید ظاهر شد و سیستم چیدمان دوبعدی را ارائه داد که هم سطر و هم ستون را در برمی‌گیرد. این قابلیت امکان ایجاد طرح‌های چیدمان پیچیده‌تر و پیچیده‌تر را در مقایسه با Flexbox فراهم می‌کند.

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

برای ماهرشدن در استفاده مؤثر از CSS Grid، بهتر است ابتدا باید مسئله که Flexbox چیست و اصول اولیه آن چه هستند، آشنا شوید. Flexbox برای تراز کردن عناصر در برنامه‌ها ضروری است و قابلیت‌های CSS Grid را در طراحی طرح‌بندی تکمیل می‌کند.

چه زمانی از گرید و چه زمانی از فلکس باکس استفاده کنیم؟

CSS Flexbox برای طرح‌های طرح‌بندی کوچک با چند ردیف یا ستون مناسب است و عناصر را به راحتی با ویژگی‌هایی مانند display هم‌تراز می‌کند. در حالی که می‌توانید کل برنامه‌ها را با Flexbox بسازید، CSS Grid نوعی رویکرد جامع‌تر برای ایجاد و نگهداری طرح‌بندی دقیق ارائه می‌دهد.

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

یادگیری اصولی فلکس باکس

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

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

• بررسی مفاهیم و اصطلاحات
• مروری بر Media Query
• نام‌گذاری به روش BEM
• پروژه سایت شرکتی
• پیاده‌سازی Grid System
• پروژه سایت شخصی

همچنین شما می‌توانید با استفاده از دوره آموزش FlexBox به صورت کاملا رایگان و پروژه محور نیز با اصول اولیه این فناوری آشنا شوید و اولین و مهم‌ترین قدم خود را در راستای حرفه‌ای شدن بردارید.