gpt4 book ai didi

html - 使 flex 元素彼此相邻堆叠

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

我有 10 个 div:2 个隐藏,8 个堆叠,一个叠在一起。

使用媒体查询,当调整屏幕大小时,我可以显示 2 个隐藏的 div。

所以,现在底部有 4 个红色 div,但我希望它们成对出现 - 2 行,其中 2 个红色 div 彼此相邻。

enter image description here

我该怎么做?

html {
font-size: 20px;
}

.box {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
Margin: 5px;
/* width: calc(33.33% - 10px);*/
}


/* Flexbox code starts here */

.container {
display: flex;
/*Must!!!! on the container, in order to turn it to flex*/
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}


/* Colors for each box */

.blue {
background: blue;
}

.orange {
background: Orange;
height: 300px;
}

.green {
background: green;
}

.red {
background: red;
height: 170px;
}

.hide-reds {
display: none;
}


/*Media Queries for Different Screen Sizes*/

@media all and (min-width: 800px) {
.red {
display: block;
}
}
<div class="container">
<div class="box blue">Blue</div>
<div class="box blue">Blue</div>
<div class="box orange">Orange</div>
<div class="box green">Green</div>
<div class="box green">Green</div>
<div class="box green">Green</div>
<div class="box red">Red</div>
<div class="box red">Red</div>
<div class="box red hide-reds">Red</div>
<div class="box red hide-reds">Red</div>
</div>

最佳答案

您的容器有 flex-direction: column。您的布局只有一列。但是没有办法将 flex 元素并排包装在一列中。 Flexbox doesn't work that way.

但是,您的布局可以使用 flex-direction: rowflex-wrap: wrap。通过给每个元素 width: 100%,每个元素强制下一个元素到下一行。这将创建一列堆叠的元素。然后,给最后四个元素 width: 50%,所以每行有两个。

.container {
display: flex;
flex-wrap: wrap;
}

.box {
flex: 0 0 100%;
}

.red {
flex: 1 0 100%;
background: red;
height: 170px;
}

.hide-reds {
display: none;
}

@media all and (min-width: 800px) {
.red {
flex-basis: 40%; /* see note below */
display: block;
}
}


/* not relevant to the problem */
.blue {
background: blue;
}

.orange {
background: Orange;
height: 300px;
}

.green {
background: green;
}

html {
font-size: 20px;
}

.box {
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
padding: 10px;
margin: 5px;
}
<div class="container">
<div class="box blue">Blue</div>
<div class="box blue">Blue</div>
<div class="box orange">Orange</div>
<div class="box green">Green</div>
<div class="box green">Green</div>
<div class="box green">Green</div>
<div class="box red">Red</div>
<div class="box red">Red</div>
<div class="box red hide-reds">Red</div>
<div class="box red hide-reds">Red</div>
</div>

jsFiddle demo

关于 flex-basis: 40% 的注意事项:

flex-grow: 1flex 简写中定义(参见 .red),就不需要 flex- basis 为 50%,由于边距,这实际上会导致每行一个元素(参见 .box)。

因为 flex-grow 会占用行上的空闲空间,flex-basis 只需要足够大就可以强制换行。在这种情况下,使用 flex-basis: 40%,边距有足够的空间,但没有足够的空间容纳第三项。

关于html - 使 flex 元素彼此相邻堆叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47085613/

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