CSS

• Flexbox Layout

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

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

این نکته را در نظر بگیرید که دلیل اصلی اخراج نعناع از شرکت، استفادۀ زیاد از margin و padding بود. بنابراین پمبه تصمیم گرفت که به‌هیچ‌وجه از margin استفاده نکند و حداکثر یک بار از padding استفاده نماید. همچنین مدیر پمبه از او خواسته است که در کد خود حتماً از flexbox برای چیدمان المان‌های مختلف استفاده کند.

توضیحات سوال

می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی، این فیلم را مشاهده کنید.

پروژه اولیه

پروژه اولیه را از این لینک دانلود کنید.

initial-project-02.zip
├── icons
│   └── access.svg
│   └── authentication.svg
│   └── bug.svg
│   └── financial.svg
│   └── hardware.svg
│   └── problem.svg
│   └── work.svg
├── dynamic.css
├── index.html
└── static.css

خواسته‌های مسئله

• حذف کدهای نادرست قبلی
• استفاده از flexbox برای ایجاد چیدمان و فاصله بین المان‌ها
• جلوگیری از خروج المان‌های داخل flexbox به خارج از صفحه
• افزایش عرض المان‌ها، در صورت وجود فضای کافی
• کاهش عرض المان‌ها، در صورت وجود نداشتن فضای کافی
• حذف Underline از لینک‌ها

نکات

• شما تنها مجاز به تغییر در فایل dynamic.css هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
• توجه کنید که داوری خودکار بر مبنای ساختار فایل index.html انجام می‌شود.
• برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
└── dynamic.css