I am trying to create a responsive layout with Flexbox that allows me to alternate both directions row
and row-reverse
.
Maybe you can better understand this with some kind of image (remember the order of the boxes):
And resizing:
Or more:
You can imagine the arrow passing through each box, it should go through 1-8 after a sequence of numbers (for example, snakes).
How can I achieve this with flexbox?
, CSS order
, . , JavaScript, ( , ). , ?
.
, :
.flexbox-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
width: 380px;
height: 100px;
background: red;
margin: 5px;
font-family: sans-serif;
color: white;
text-align: center;
font-size: 2em;
line-height: 150%;
}
<div class="flexbox-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
<div class="flex-item">8</div>
</div>
Hide result