如何在HTML和CSS中使flexbox div填充其容器的高度？

ruoxqz4g 于 2023-06-07 发布在其他

关注(0)|答案(2)|浏览(307)

`你好，我正在尝试创建一个卡只使用CSS和HTML。卡片是水平的，其中在左侧有图像，在右侧有标题和段落，在右下方有链接。我的问题是，我不能使链接停留在右下角的卡和标题和段落开始在右上角，因为他们停留在中心。
我认为主要的问题是div cast-card-info的高度，它是三个元素的容器，没有填满它的容器的高度。我尝试在cast-card-info中添加flex basis，使其增长，但它不会增长并填充heigt，因为它只能水平增长，因为容器cast-card设置为direction row。设置一个固定的高度，以容器铸造卡将解决这个问题，但我不想设置一个固定的高度，所以它是更敏感。

.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

来源：https://stackoverflow.com/questions/76363064/how-can-i-make-a-flexbox-div-fill-the-height-of-its-container-in-html-and-css

2条答案

按热度按时间

dpiehjr41#

我觉得你可能太努力了。CSS中有自然行为和默认行为。让这些作为开始，然后根据需要修改它们。例如，在大多数情况下，您不应该将宽度设置为100%或使用flex column，因为这是页面上元素的自然宽度和流动。
在cast-card-info div上使用flex和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>

赞(0）回复(0）举报 2023-06-07

soat7uwm2#

Flex项目的宽度或高度（无论哪个在主尺寸中）都是项目的主尺寸。flex项的主大小属性是“width”或“height”属性，无论哪个在主维度中。
你也可以玩flex-basis或height：100%（inherit from parent）
Css Tricks guide