Move Item to Next Row on Resize with Flexbox
· ☕ 2 min read
In this tutorial, I’ll show how to make items of a flexbox to go to the next line on the window resize. There comes a time in life when you need to create layouts where block snaps to next line when the window is too narrow. This is a best practice in responsive web design. The Setup Let’s get started creating a skeleton for our experiments: 1 2 3 4 5 6 <div class="flex"> <div class="item">HTML</div> <div class="item">CSS</div> <div class="item">JavaScript</div> <div class="item">MongoDB</div> </div> As we have the skeleton, let’s start designing.