gpt4 book ai didi

html - Flexbox 中的 SVG 弄乱了其他元素的高度

转载 作者:技术小花猫 更新时间:2023-10-29 12:40:38 28 4
gpt4 key购买 nike

我正在尝试使用一个 svg 元素,它在 flexbox 中随容器大小调整大小,但由于某种原因,它弄乱了 svg 下面的 div(带有文本)的大小。 (调整浏览器窗口大小时有多少变化)

example

这是我用于所有这些的基本 css 属性:

[layout] {
box-sizing: border-box;
display: flex;
}

[layout=column] {
flex-direction: column;
}

[layout=row] {
flex-direction: row;
}

[flex] {
box-sizing: border-box;
flex: 1;
}

HTML:

<div class="content" style="height: 100%;" layout="row">

<div class="card" layout="column" flex>
<div class="toolbar" layout="column">
<span>Test</span>
</div>

<div class="card-content" layout="column" flex>
<div layout="column" flex>
<div layout="column" flex>
<div layout="column" flex
style="background:green;">
<svg viewBox="0 0 50 50">
<circle r="25" cx="25" cy="25">
</svg>
</div>
</div>
<div>Text</div>
</div>
</div>
</div>
</div>

代码笔: http://codepen.io/anon/pen/rVJepm

如何在使用 SVG 时修复尺寸?

最佳答案

您的 flex-box 问题出现在 flex 简写属性的使用中。您将其设置为:flex: 1 1 auto,这意味着:flex-grow: 1;伸缩收缩:1; flex 基础:自动;

因为您不希望包含内容text 的容器缩小。您只需为此节点设置 flex-shrink: 0;。这是您的 fork 演示:http://codepen.io/anon/pen/GJQqog

旁注:在我看来,在 html5 中组成新属性仍然是非法的。这不是失败的原因,但也许选择 data-attributes 会更好.

关于html - Flexbox 中的 SVG 弄乱了其他元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31159230/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com