我有下面的代码。
在我设置的.container
上
display:flex;
flex-direction: column;
让我的 previous
和 next
箭头在容器 items
之前和之后移动。 flex 方向保持行不起作用。
.container {
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid green;
display: flex;
flex-direction: column;
}
.items {
left: 0;
top: 0;
display: flex;
flex-direction: row;
padding: 0.5rem 0;
position: relative;
margin: 2px;
}
.item {
align-items: center;
display: flex;
height: 60px;
justify-content: center;
margin: 2px;
}
.item>* {
cursor: pointer;
display: flex;
max-height: 100%;
}
.item img {
display: block;
max-height: 100%;
}
.previous::before,
.next::before {
color: #9e9e9e;
font: 400 1.5rem/1 iconfont !important;
speak: none;
text-transform: none !important;
}
<div class="container">
<div class="previous">S</div>
<div class="items">
<div class="item">
<a href="#"><img src="https://via.placeholder.com/50"></a>
</div>
<div class="item">
<a href=""><img src="https://via.placeholder.com/50"></a>
</div>
<div class="item">
<a href=""><img src="https://via.placeholder.com/50"></a>
</div>
<div class="item">
<a href=""><img src="https://via.placeholder.com/50"></a>
</div>
</div>
<div class="next">S</div>
</div>
最佳答案
实际上您需要从 .container
中删除 flex-direction: column
,因为您正试图通过将箭头与元素内嵌来创建一行
.container {
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid green;
display: flex;
align-items: center
}
.items {
left: 0;
top: 0;
display: flex;
padding: 0.5rem 0;
position: relative;
margin: 2px;
flex: 1;
background: lightblue;
justify-content: center
}
.item {
align-items: center;
display: flex;
height: 60px;
justify-content: center;
margin: 2px;
}
.item>* {
cursor: pointer;
display: flex;
max-height: 100%;
}
.item img {
display: block;
max-height: 100%;
}
.previous::before,
.next::before {
color: #9e9e9e;
font: 400 1.5rem/1 iconfont !important;
speak: none;
text-transform: none !important;
}
<div class="container">
<div class="previous">S</div>
<div class="items">
<div class="item">
<a href="#"><img src="https://via.placeholder.com/50"></a>
</div>
<div class="item">
<a href=""><img src="https://via.placeholder.com/50"></a>
</div>
<div class="item">
<a href=""><img src="https://via.placeholder.com/50"></a>
</div>
<div class="item">
<a href=""><img src="https://via.placeholder.com/50"></a>
</div>
</div>
<div class="next">S</div>
</div>
关于html - 如果其中一个子项具有相对位置,则忽略 Flex 方向列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54332327/