محاذاة عناصر إلى أسفل باستخدام FlexBox

في السيناريو المقدم ، لديك حاوية DIV مع مختلف عناصر الطفل. تهدف إلى تحقيق تخطيط حيث تتراكم العناصر رأسياً ، مع وضع الزر دائمًا في الأسفل ، بغض النظر عن ارتفاع النص. تمكن هوامش السيارات من توزيع المساحة المتبقية على العناصر ذات هوامش السيارات قبل المحاذاة. تتمثل إحدى الطرق لتحقيق التصميم المطلوب في استخدام CSS التالي:

p {margin-bottom: auto ؛ } / * ادفع العناصر التالية إلى أسفل * / A {Margin-Top: Auto ؛ } / * ادفعه وعناصر متابعة إلى أسفل * /

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

. المحتوى { الارتفاع: 200 بكسل ؛ الحدود: 1 بكسل صلبة. العرض: فليكس. الاتجاه المرن: العمود ؛ } H1 ، H2 { الهامش: 0 ؛ } أ { الهامش: السيارات ؛ }

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

  
heading 1
  
heading 2
  
Some text more or less
  Click me