Flexbox: قائمة حقيقية

شاهد معي: صناديق جنباً إلى جنب

الروابط في قائمتك تجلس حالياً على الصفحة واحداً بعد الآخر، كالكلمات في جملة. القائمة الحقيقية لها عناصر مصطفة ب neatness، جنباً إلى جنب، بمسافات. CSS لديه أداة لصف الصناديق تسمى flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

هذا كل شيء. display: flex يخبر الصندوق: “صف أطفالك (الروابط هنا) في صف.” وgap يضبط المسافة بينهم. Flexbox يستطيع أكثر:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

شاهد معي: قائمة كالمواقع الحقيقية

لنجمع كل ما تعرفه مع flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

شيء جديد في النهاية: :hover يعني “عندما تمرّر الماوس فوقه”. عنصر القائمة يضيء عند التمرير – تماماً كالمواقع التي تعرفها.

دورك الآن 💪

حوّل قائمتك إلى قائمة حقيقية: شريط ملون بعرض الرأس كله، عناصر جنباً إلى جنب كحبوب، تضيء عند التمرير. خذ الألوان من لوحتك من الدرس 6.

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

header {
  background-color: #ea580c;
  padding: 16px;
}

header {
  background-color: #15803d;
  padding: 16px;
}

header {
  background-color: #b91c1c;
  padding: 16px;
}

ما ستخرج به من هذا الدرس

• display: flex يصف أطفال الصندوق في صف، gap يضع مسافة بينهم.
• justify-content وalign-items يمحاذيان، flex-wrap: wrap يسمح بالالتفاف.
• :hover = “عندما يمرّ الماوس فوقه”. توهج صغير يجعل الموقع حياً.

© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى