代码之家 › 专栏 › 技术社区 › Max Millington

防止flexchild生长[复制]

flexbox css

Max Millington · 技术社区 · 6 年前

这个问题已经有了答案:

给出以下代码:

.outer-container {
  display: flex;
  justify-content: space-evenly;
}

.left-container {
  height: 300px;
}

.right-container {
  flex: 0 1 auto;
}

<div class='outer-container'>
  <div class='left-container'>Lefto</div>
  <div class='right-container'>Righto</div>
</div>

尽管 flex-grow 属性设置为0。我如何防止这种情况发生?也就是说,我希望合适的容器只有其内容物那么高。

Codepen: https://codepen.io/MaxMillington2/pen/PxOwxo

1 回复 | 直到 6 年前

ksav 6 年前

添加 align-self: flex-start 上 .right-container

.outer-container {
  display: flex;
  justify-content: space-evenly;
}

.left-container {
  height: 300px;
  border: 1px solid blue;
}

.right-container {
  align-self: flex-start;
  border: 1px solid red;
}

<div class='outer-container'>
  <div class='left-container'>Lefto</div>
  <div class='right-container'>Righto</div>
</div>

注: flex-grow ,请 flex-shrink 和 flex-basis 用于控制空间沿主轴 . 在这种情况下,主轴是左-右的,因为 flex-direction 设置为 row 默认情况下。

这个 align-items 属性将在横轴上对齐项目。此属性的初始值为 stretch 这就是为什么默认情况下,弹性项目会延伸到最高项目的高度。

MDN - Concepts of Flexbox

这就是为什么你需要重写 对齐项目 对你 .outer-container 或 align-self 给灵活的孩子们。

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前