我总共有 4 个元素要显示在一个页面上。顶部有两个元素,下面有两个元素。底部尺寸的那些需要与顶部的不同。我正在使用 flexbox 来做到这一点。问题是,在宽屏显示器上,第三个元素一直换到第一行。这是我的代码。
.dashboard {
&-inner {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: center;
min-height: 100vh;
margin-top: $reporting-report-offset-top;
max-width: 1900px;
&-grid {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
overflow: hidden;
max-height: 100%;
margin: 0 auto;
max-width: 1900px;
&-item {
margin: $reporting-view-spacing;
// &-1 {
// min-width: 50%;
// }
&-2 {
// min-width: 50%;
// margin-right: 100px
}
&-3 {
max-width: 238px !important;
margin-right: 8px;
height: 687px !important;
}
顶部的两个元素将占据可用宽度的 50%(包括边距),第三个元素将占据底部行的大约 25%,第四个元素将占据另外 75%。如何强制底部元素到第二行并阻止它换行到顶部?
最佳答案
这是一种在 flex 元素中添加换行符样式的方法。
.separator {
content: '';
width: 100%;
}
.boxes {
display: flex;
flex-flow: row wrap;
}
.box {
height: 100px;
background: red;
border: 1px solid black;
box-sizing: border-box;
}
.box--25 {
width: 25%;
}
.box--50 {
width: 50%;
}
.box--75 {
width: 75%;
}
.separator {
content: '';
width: 100%;
}
<div class="boxes">
<div class="box box--50"></div>
<div class="box box--50"></div>
<br class="separator" />
<div class="box box--25"></div>
<div class="box box--75"></div>
</div>
关于html - 如何在 flex 中强制连续放置最大数量的框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56193280/