`你好，我正在嘗試創建一個只使用css和html的卡片。卡片是水平的，左邊有一個圖像，右邊有一個標題和一個段落，右下角有一個鏈接。 我的問題是我不能讓鏈接停留在卡片的右下角，標題和段落從右上角開始，因為它們停留在中間。

我認為主要的問題是div cast-card-info(這三個元素的容器)的高度沒有填充它的容器的高度。我試著在cast-card-info中添加flex basis，使其增長，但它沒有增長并填充heigt，因為它只水平增長，因為容器cast-card設置為direction row。給容器cast-card設置一個固定的高度可以解決這個問題，但是我不想設置一個固定的高度，這樣它會更容易響應。

.cast-card{
    width: 600px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    background-color: var(--light);
    border: var(--border-size) solid var(--dark);
    border-radius: 6px;
    box-shadow: 4px 4px 0px var(--dark);
    padding: 8px;
    box-sizing: border-box;

}

.cast-card-info{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 12px;
    flex: 1 1 auto;
}
.cast-card-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
}

<div class="cast-card">
  <img class="cast-card-img" src="http://via.placeholder.com/148x243" alt="photo">
  <div class="cast-card-info">
    <div class="cast-card-text">
      <h3>heading</h3>
      <p>Morbi euismod nisl sit amet auctor fringilla. Suspendisse potenti. Nam auctor vel purus sed interdum. Donec pellentesque lacus tellus .</p>
    </div>
    <a class="link" href="">Read more</a>
  </div>
</div>

我覺得你可能太努力了。CSS中有自然和默認的行為。讓這些作為開始，然后根據需要修改它們。例如，在大多數情況下，您不必將寬度設置為100%或使用flex column，因為這是頁面上元素的自然寬度和流向。

在cast-card-info div上使用flex with direction列使您能夠使用justify-content:space-between；拆分文本和鏈接。然后你可以給鏈接align-self: end，把它推到容器的末尾。

* {
  box-sizing: border-box;
}

.cast-card {
  --dark: black;
  --border-size: 2px;
  
  width: 600px;
  display: flex;
  background-color: var(--light);
  border: var(--border-size) solid var(--dark);
  border-radius: 6px;
  box-shadow: 4px 4px 0px var(--dark);
}

.cast-card-info{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 12px;
}

.link {
  align-self: flex-end;
}

<div class="cast-card">
  <img class="cast-card-img" src="http://via.placeholder.com/148x243" alt="photo">
  <div class="cast-card-info">
    <div class="cast-card-text">
      <h3>heading</h3>
      <p>Morbi euismod nisl sit amet auctor fringilla. Suspendisse potenti. Nam auctor vel purus sed interdum. Donec pellentesque lacus tellus.</p>
    </div>
    <a class="link" href="">Read more</a>
  </div>
</div>

flex項目的寬度或高度(以主尺寸為準)是項目的主要尺寸。flex項目的主要大小屬性是“width”或“height”屬性，以主維度中的任何一個為準。

你也可以玩彈性基礎或高度:100%(從父母繼承)

Css技巧指南

`https://codepen.io/BenD/pen/KKBEYJP`