هل يتم تطبيق flex فقط في الكونتينر؟ أم يتم إضافة المزيد من الخصائص في الأبناء؟

في Flexbox ، يتم تطبيق خاصية flex بشكل عام على الكونتينر لتوزيع العناصر داخل الكونتينر. ومع ذلك ، يمكنك أيضًا استخدام بعض الخصائص الأخرى في العناصر نفسها لتنسيقها بشكل أفضل.

إليك بعض الخصائص المهمة التي يمكنك استخدامها في العناصر :
- `align-self`: تسمح لك بتعيين موضع عنصر فرعي بشكل فردي داخل الكونتينر ، مثل توسيطه عموديًا أو أفقيًا.
- `order`: تسمح لك بتعيين ترتيب العناصر الفرعية داخل الكونتينر بناءً على رقم تسلسلي.
- `flex-grow`: تحدد مدى قدرة العنصر الفرعي على التمدد داخل الكونتينر بناءً على المساحة المتاحة.
- `flex-shrink`: تحدد مدى قدرة العنصر الفرعي على الانكماش داخل الكونتينر عندما لا يوجد ما يكفي من المساحة المتاحة.
- `flex-basis`: تحدد الحجم الأولي للعنصر الفرعي قبل التمدد أو الانكماش.
- `flex-wrap`: تعيين ما إذا كانت العناصر الفرعية يجب أن تكون على نفس السطر أم أنه يجب عليها طيها إلى أسفل السطر الجديد حينما لا تتمكن من الاحتفاظ بنفس العرض.

لتوضيح الفكرة، أنظر هذا الكود:.

container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.item1 {
  align-self: center;
  order: 2;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
}

في هذا المثال، نستخدم `align-self` لتوسيط العنصر عموديًا، واستخدمت `order` لتحديد ترتيب العنصر الفرعي في الكونتينر، واستخدمت `flex-grow` لتحديد مدى تمدد العنصر الفرعي، واستخدمت `flex-basis` لتحديد الحجم الأولي للعنصر الفرعي.

وهذه بعض المصادر لكي تتعلم منها.

يتم تطبيق الخاصية على الأب ويؤثر ذلك بطبيعة الحال على العناصر الأبناء، من حيث تموضعها وتوزيعها سواء على المحور الأفقي أو العمودي بداخل هذا الحاوي الأب. ولذلك فإن تأثيرها يظهر على الأبناء في حين أنه يتم تطبيق الخواص على الأب. 

على الرغم من ذلك، يمكنك أيضًا استخدام بعض الخصائص الأخرى في العناصر الابناء لتخصيص التصميم بشكل أفضل. مثلاً، يمكنك استخدام الخصائص المُشابهة لـ Flexbox مثل align-self و order لضبط محاذاة وترتيب العناصر داخل الكونتينر.

مثال: 

نفترض أن لدينا كونتينر (عنصر أب) يحتوي على عدة عناصر أبناء (عناصر فرعية) ونرغب في استخدام تقنية Flexbox لتوزيعها وتنسيقها:

<div class="container">
  <div class="child">عنصر 1</div>
  <div class="child">عنصر 2</div>
  <div class="child">عنصر 3</div>
</div>

.container {
  display: flex;
  align-items: center; /* محاذاة العناصر عموديًا في المنتصف */
}

.child {
  padding: 10px;
  background-color: #f0f0f0;
}

النتيجة: