gpt4 book ai didi

html - 跨越 2 列和 2 行的 Flexbox 单元格

转载 作者:搜寻专家 更新时间:2023-10-31 08:40:26 25 4
gpt4 key购买 nike

<分区>

我想知道这是否可以只用 flexbox 来完成,或者我是否还需要合并网格功能。我试图让特定的单元格跨越多行和多列。在我的独特案例中,它只是第一个框需要跨越与其下方的 2 个框相同的宽度和与其右侧的两个框相同的高度。

这是我最初尝试的代码笔,我明白为什么它不起作用。只是想知道是否有办法得到这个:

#container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}

.box {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 31.58585%;
background-color: #f1f1f1;
border: 1px solid #aaa;
margin-bottom: 10px;
margin-top: 10px;
text-align: center;
}

.highlight {
flex-basis: 65.9%;
}
<div id="container">
<div class="box highlight">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</div>

进入这个:

enter image description here

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