ماژول Flexbox در CSS
CSS Flexbox Layout یک روش مدرن و کارآمد برای ساختاردهی و طراحی لایه‌های انعطاف‌پذیر و واکنش‌گرا در صفحات وب است. این ماژول به شما کمک می‌کند که بدون استفاده از ویژگی‌های float یا position، به راحتی طرح‌بندی‌های پیچیده و انعطاف‌پذیری ایجاد کنید.
قبل از Flexbox
قبل از معرفی ماژول Flexbox، چهار روش اصلی برای طراحی لایه‌ها در صفحات وب وجود داشت:
- Block: برای بخش‌های یک صفحه وب
- Inline: برای متن‌ها
- Table: برای داده‌های دو بعدی در قالب جدول
- Positioned: برای مکان‌دهی صریح یک عنصر در صفحه
پشتیبانی مرورگرها
ویژگی‌های Flexbox در همه مرورگرهای مدرن پشتیبانی می‌شوند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 29.0 | 11.0 | 22.0 | 10 | 48 |
عناصر Flexbox
برای شروع استفاده از مدل Flexbox، ابتدا باید یک Flex Container (ظرف انعطاف‌پذیر) تعریف کنید. این ظرف شامل عناصر فرزند به نام Flex Items (موارد انعطاف‌پذیر) می‌باشد.
مثال:
در این مثال، یک Flex Container با سه Flex Item ساخته شده است:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>با استفاده از Flexbox، شما می‌توانید به سادگی این عناصر را در جهت‌ها و چینش‌های مختلف مرتب کنید و انعطاف بیشتری در طراحی سایت داشته باشید. در فصل‌های بعدی، بیشتر با Flex Containers و Flex Items آشنا خواهید شد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام