**CSS**
- Flexbox Layout
---
پمبه در مصاحبه نمرۀ قبولی آورد و در شرکت اسخدام شد.
چند وقت پیش، شرکت تصمیم گرفته بود نعناع را که قبل از پمبه آنجا کار می‌کرد، اخراج کند.
علت این قضیه، آن بود که نعناع نمی‌توانست طرح‌های مورد نظر را به درستی پیاده‌سازی کند.
حال از پمبه خواسته شده، کدهای قبلی نعناع را بازخوانی و آن‌هایی که نادرست هستند را پاک
و به شکل درست پیاده‌سازی کند.
این نکته را در نظر بگیرید که دلیل اصلی اخراج نعناع از شرکت، استفادۀ زیاد از `margin` و `padding` بود.
بنابراین پمبه تصمیم گرفت که **به‌هیچ‌وجه** از `margin` استفاده نکند و **حداکثر یک بار** از `padding` استفاده نماید.
همچنین مدیر پمبه از او خواسته است که در کد خود حتماً از `flexbox` برای چیدمان المان‌های مختلف استفاده کند.
## توضیحات سوال
<details class="green">
<summary>تصویر خروجی نمونه</summary>
</details>
می‌توانید برای بررسی دقیق‌تر نتیجۀ نهایی،
[این فیلم](https://codestar.s3.ir-thr-at1.arvanstorage.com/challenge-02.mp4)
را مشاهده کنید.
## پروژه اولیه
پروژه اولیه را از [این لینک](https://quera.ir/contest/assignments/41564/download_problem_initial_project/139930) دانلود کنید.
<details class="blue">
<summary>ساختار فایل‌ها</summary>
```
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
```
</details>
<details class="pink">
<summary>راه‌اندازی پروژه</summary>
+ ابتدا پروژۀ اولیه را دانلود و از حالت فشرده خارج کنید.
+ سپس فایل `index.html` را در مرورگر خود باز کنید.
</details>
## خواسته‌های مسئله
- حذف کدهای نادرست قبلی
- استفاده از flexbox برای ایجاد چیدمان و فاصله بین المان‌ها
- جلوگیری از خروج المان‌های داخل flexbox به خارج از صفحه
- افزایش عرض المان‌ها، در صورت وجود فضای کافی
- کاهش عرض المان‌ها، در صورت وجود نداشتن فضای کافی
- حذف Underline از لینک‌ها
| مقدار | ویژگی | وضعیت | المان |
| :-----------------------------------: | :---------------: | :---: | :---: |
| `1rem` | فاصله بین فرزندان | \- | nav |
| `--color--nav-link-background` | رنگ پس‌زمینه | \- | a |
| `--color--nav-link-background--hover` | رنگ پس‌زمینه | hover | a |
| `--color--body-foreground` | رنگ | \- | a |
| `0.5rem` | فاصله بین فرزندان | \- | a |
| `1rem` | Padding | \- | a |
| `0.2rem` | گردی گوشه‌ها | \- | a |
## نکات
- شما تنها مجاز به تغییر در فایل `dynamic.css` هستید. تغییرات در باقی فایل‌ها نادیده گرفته می‌شود.
- توجه کنید که داوری خودکار بر مبنای ساختار فایل `index.html` انجام می‌شود.
- برای ثبت پاسخ، پروژه را با ساختار زیر ارسال کنید.
```
[your-zip-file-name].zip
└── dynamic.css
```