Html 有没有办法根据另一个项目调整FlexBox项目的大小

发布于12月24日

我有一个项目，这里用一个名为large-child的空div表示，它有一个固定的高度.这将控制灰色parent的高度.我想要做的是允许child-flex垂直填充空间，所以我将其设置为large-child%.不过，这似乎行不通，到目前为止，让child-flex盒填满空间的唯一方法是让它比large-child盒更大.

有没有办法让这件事行得通？

.parent {
  display: flex;
  width: 100%;
  background-color: gray;
  align-items: center;
  height: fit-content
}

.child-flex {
  display: flex;
  height: 100%;
  background-color: blue;
}

.large-child {
  background-color: red;
  width: 50px;
  height: 50px
}

<div class="parent">
  <div class="large-child"></div>
  <div class="child-flex">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
</div>

推荐答案

What I want to do is to allow the 100 to fill the space vertically

您需要申请:

align-items: stretch;

到.parent.

然后，您可以申请:

align-items: center;

到.child-flex.

Working Example:个

.parent {
  display: flex;
  justify-content: start;
  align-items: stretch;
  width: 100%;
  background-color: gray;
}

.child-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: blue;
}

.large-child {
  background-color: red;
  width: 50px;
  height: 50px
}

<div class="parent">
  <div class="large-child"></div>
  <div class="child-flex">
    <a>Item 1</a>
    <a>Item 2</a>
    <a>Item 3</a>
  </div>
</div>

Html 有没有办法根据另一个项目调整FlexBox项目的大小

推荐答案

Html相关问答推荐

卡片上方的文本

如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

如何找到FontAwese图标的Unicode值？

使用网格时图像溢出容器高度

Angular Project中的星级 Select

如何收集<；p&>元素下的<；p>；子元素

我应该怎么做才能显示出整个字符串？

assets资源净值元素不会扩展到涵盖子项

如何创建嵌套的动态表单元素

如果使用复选框属性更改，如何防止事件更改？

在Firefox中使用keySplines时，SVG： <animateMotion>不起作用

如何使用html css将图像显示为附加形状

CSS 跨度与子元素交替 colored颜色

pull-right 不适用于 bootstrap alert 内的按钮

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列？

SVG 调整大小而不是溢出

CSS 中的 fingerprint scanner 动画

我可以在标签元素中使用标题元素吗？

CSS Padding 将右对齐的对象推离页面

更改包含图标高度的 div