我创建了一个完整的网站,但删除了所有填充程序并留下了3列div。我的目标是在调整图像大小时将这3列垂直堆叠。
附加的css包含在内,因为它与网站的其余部分一起使用,因此我将其全部包含在内。
我尝试查找某些媒体查询,并尝试将我的头部包裹在flexbox周围。任何帮助将不胜感激。
* {
border: 1px solid red;
/*For layout purposes only*/
}
* {
max-width: 980px;
font-family: 'Lato', sans-serif;
margin-left: auto;
margin-right: auto;
padding-bottom: 0px;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.row {
width: 100%;
display: flex;
}
.img {
display: block;
margin: auto;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
<header class="container">
<div class="row">
<div class="col-4">
<img class="img" src="http://placehold.it/300x300">
</div>
<div class="col-4">
<img class="img" src="http://placehold.it/300x300">
</div>
<div class="col-4">
<img class="img" src="http://placehold.it/300x300">
</div>
</div>
</header>
答案 0 :(得分:1)
弹性容器的初始设置为flex-direction: row
。这意味着容器的子项(“flex items”)将水平对齐,就像在代码中一样。
要垂直堆叠项目,请切换到flex-direction: column
。
.row {
display: flex;
flex-direction: column; /* NEW */
}
如果您希望在调整大小时垂直堆叠Flex项目,请更改媒体查询中的flex-direction
:
@media screen and ( max-width: 500px ) {
.row { flex-direction: column; }
}