محاذاة

النقطة الأساسية الموضحة هنا هي استخدام justify-content: space-between، حيث يتم وضع العنصر الثانوي الأول والأخير على حواف مربع الإحاطة، مع توزيع المساحة المتبقية بالتساوي بين العناصر. بالنسبة إلى هذه البطاقات، يتم وضعها في وضع عرض flexbox، مع ضبط الاتجاه على العمود باستخدام flex-direction: column.

يضع هذا العنوان والوصف وكتلة الصورة في عمود رأسي داخل البطاقة الرئيسية. بعد ذلك، يؤدي تطبيق justify-content: space-between إلى تثبيت العنصرَين الأول (العنوان) والأخير (كتلة الصورة) على حواف الحاوية المرنة، ويتم وضع النص الوصفي بينهما بمسافة متساوية مع كل نقطة نهاية.

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

HTML

<div class="container">
  <div class="card">
    <h3>Title - Card 1</h3>
    <p contenteditable>Medium length description with a few more words here.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 2</h3>
    <p contenteditable>Long Description. Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <div class="visual"></div>
  </div>
  <div class="card">
    <h3>Title - Card 3</h3>
    <p contenteditable>Short Description.</p>
    <div class="visual"></div>
  </div>
</div>

CSS

        .container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
}

.visual {
  height: 100px;
  width: 100%;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  justify-content: space-between;
}

h3 {
  margin: 0
}