我经常遇到这种布局问题:
小屏幕 - 元素堆叠在一行中,通常是图像后跟一些文本,然后是一个较小的子区域用于额外的杂项:
中等屏幕及以上 - 元素重新排列为 2 列,左侧为图像和其他内容,右侧为文本:
我觉得我应该可以用 flexbox 做到这一点,但我不知道怎么做。我知道我可以使用以下方法在列中排列元素:
.container {
display: flex;
flex-flow: column wrap;
}
.one,
.two,
.three {
width: 50%;
}
.one {
order: 1;
}
.two {
order: 3;
}
.three {
order: 2;
}
但问题是似乎没有办法在不设置固定高度的情况下将元素分成两列,这显然不能很好地响应响应。
有没有办法强制列在某些点断开?
最佳答案
你可以这样做。通过将宽度设置为移动尺寸的 100%。他们各走各的路。
.container {
width: 75%;
margin: 0 auto;
}
.box1, .box2, .box3 {
width: 50%;
}
.box1 {
background-color: blue;
float:left;
}
.box2 {
background-color: green;
float: right;
}
.box3 {
background-color: purple;
float: left;
}
@media screen and (max-width: 800px) {
.box2 {
float: left;
}
.box1,.box2,.box3 {
width: 100%;
}
}
关于css - Flexbox:单列到堆叠多列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29996973/