gpt4 book ai didi

html - Flexbox 高度问题

转载 作者:行者123 更新时间:2023-11-28 11:05:39 24 4
gpt4 key购买 nike

我正在尝试学习如何使用 flexbox 制作美观的“盒子”。我制作了 3 列 flex 元素,但它们没有填满窗口(即占据每个 body 高度的 33%)。在查看指南 (http://css-tricks.com/snippets/css/a-guide-to-flexbox/) 后,我尝试使用 flex-grow,但这没有用。有谁知道如何做到这一点?

CSS:

.flexbox {
display: flex;
flex-flow: column wrap;
flex-grow: 1;

> div {
padding: 1rem;
&:nth-child(1) { background: #FF0000;}
&:nth-child(2) { background: #00FF15;}
&:nth-child(3) { background: #0015FF;}

}
}

html, body {
height: 100%;
font-size: 62,5%;
}

HTML:

<body>
<section class="flexbox">

<div>
<h1> This is the first box </h1> <p>It's a very cool looking box, I agree!</p>
</div>

<div>
<h2> This is the second box </h2> <p>Not nearly as cool, right?</p>
</div>

<div>
<h3> This is the third box </h3> <p>I'm not even going to mention this one.</p> </div>

</section>

</body>

最佳答案

flex(flex-grow、flex-shrink、flex-basis)属性用于 flex 元素,而不是 flex 容器。

http://codepen.io/cimmanon/pen/mHbLi

.flexbox {
display: flex;
flex-flow: column wrap;
height: 100%; /* here */

> div {
flex-grow: 1; /* here */
padding: 1rem;
&:nth-child(1) { background: #FF0000;}
&:nth-child(2) { background: #00FF15;}
&:nth-child(3) { background: #0015FF;}
}
}

html, body {
height: 100%;
font-size: 62.5%;
}

关于html - Flexbox 高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22271137/

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