Thẳng hàng

Điểm chính được minh hoạ ở đây là việc sử dụng justify-content: space-between, trong đó đặt các phần tử con đầu tiên và cuối cùng ở các cạnh của hộp giới hạn, với không gian còn lại được phân bổ đồng đều giữa các phần tử. Đối với các thẻ này, chúng được đặt ở chế độ hiển thị flexbox, với hướng được đặt thành cột bằng cách sử dụng flex-direction: column.

Thao tác này sẽ đặt tiêu đề, nội dung mô tả và khối hình ảnh vào một cột dọc bên trong thẻ chính. Sau đó, áp dụng justify-content: space-between neo các phần tử đầu tiên (tiêu đề) và cuối cùng (khối hình ảnh) vào các cạnh của vùng chứa linh hoạt, và đặt văn bản mô tả ở giữa các phần tử này với khoảng cách bằng nhau cho mỗi điểm cuối.

.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
}