使用flexbox的全角和多列 [英] Fullwidth and multiple columns using flexbox
问题描述
我正在尝试在同一容器上创建具有全角和多列的flexbox
行.
I'm trying to create a flexbox
row with fullwidth and multiple columns on the same container.
我已经尝试过flex-break: after;
,但是不确定我缺少什么.我试图避免像.fullwidth
和.multiple-columns
这样的多个类.
I've tried flex-break: after;
but am not sure what I am missing. I am trying to avoid having multiple classes like .fullwidth
and .multiple-columns
.
这是我要实现的目标:
------------------------
| |
| |
| item A |
| |
| |
------------------------
| | |
| | |
| B | C |
| | |
| | |
------------------------
| |
| |
| item D |
| |
| |
------------------------
.collage {
position: relative;
display: flex;
justify-content: flex-start;
align-items: center;
}
.fullwidth {
flex-break: after;
}
.collage-item {
width: 100%;
height: 25vw;
background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
background-size: cover;
}
.btn {
position: absolute;
border: 2px solid white;
padding: 10px 18px;
text-align: center;
right: 8px;
bottom: 8px;
color: white;
text-decoration: none;
}
<div class="collage">
<!-- fullwidth -->
<div class="collage-item fullwidth"></div>
<!-- two columns -->
<div class="collage-item"></div>
<div class="collage-item"></div>
<!-- fullwidth -->
<div class="collage-item fullwidth"></div>
<div class="btn">Button</div>
</div>
https://jsfiddle.net/brunodd/ja6820vu/1/
推荐答案
您需要在flex容器上设置flex-wrap: wrap
,然后在全角项目上设置flex: 0 0 100%
,在半角项目上设置flex: 0 0 50%
.另外,您还应该添加box-sizing: border-box
.
You need to set flex-wrap: wrap
on flex container, and then flex: 0 0 100%
on full-width items and flex: 0 0 50%
on half-width items. Also you should add box-sizing: border-box
.
* {
box-sizing: border-box;
}
.collage {
display: flex;
flex-wrap: wrap;
}
.collage-item {
border: 1px solid black;
flex: 0 0 50%;
padding: 10px;
}
.fullwidth {
flex: 0 0 100%;
}
<div class="collage">
<!-- fullwidth -->
<div class="collage-item fullwidth">a</div>
<!-- two columns -->
<div class="collage-item">b</div>
<div class="collage-item">c</div>
<!-- fullwidth -->
<div class="collage-item fullwidth">d</div>
</div>
这篇关于使用flexbox的全角和多列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!