I'm having trouble with the code snippet below.
For the .container, I have set
display:flex;
flex-direction: column;
in order to position my previous and next arrows before and after the container items. However, the flex direction does not change from row.
.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>