محاذاة خط الأساس في Flexbox

عند العمل مع خاصية المحاذاة الذاتية لـ CSS Flexbox، فهم الفرق بين البداية المرنة وخط الأساس أمر بالغ الأهمية. على الرغم من أنها قد تبدو في البداية أنها تنتج نفس النتيجة، إلا أنها تظهر سلوكًا مميزًا في سيناريوهات معينة.

محاذاة البدء المرن

تعمل محاذاة البدء المرن على محاذاة العناصر المرنة في البداية حافة المحور العرضي للحاوية المرنة. هذا عادةً هو الجزء العلوي للاتجاهات الأفقية واليسار للاتجاهات الرأسية.

محاذاة خط الأساس

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

عند استخدام محاذاة الخط الأساسي، يحدد العنصر الأطول في الصف موضع الخط الأساسي. تتم محاذاة العناصر المرنة بحيث تتم محاذاة الخطوط الأساسية الخاصة بها، مع وضع العنصر الأبعد من حافة هامش البداية على تلك الحافة.

خذ بعين الاعتبار الكود التالي :

.flex-container { العرض: فليكس؛ محاذاة العناصر: خط الأساس؛ ضبط المحتوى: مسافة بين؛ } .فليكس البند { لون الخلفية: أخضر؛ العرض: 110 بكسل؛ الحد الأدنى للارتفاع: 100 بكسل؛ الحشو: 5 بكسل؛ محاذاة النص: مركز؛

.flex-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.flex-item {
  background-color: green;
  width: 110px;
  min-height: 100px;
  padding: 5px;
  text-align: center;
}

  
A
  
B
  
C
  
D
  
E