Flex on Larger Devices
Explore how to apply flexbox layouts on larger devices using Tailwind CSS to switch from stacked block elements on small screens to flexible rows. Learn to build a responsive navigation bar with JavaScript that toggles visibility and layout seamlessly between device sizes.
We'll cover the following...
Flex for adjusting sizes
Another way to adjust between sizes is to have an element use default block spacing on smaller devices and then convert to flex spacing on larger devices. The block spacing on small devices ensures that the items stay in a column, even if some of them are narrow, while the flex spacing at a larger size spreads them out in a row.
The common pattern here is a navigation bar that’s spread over the top of the page at a larger size. But it’s a menu column at a smaller size, generally hidden until the menu button is clicked.
Below is an example:
<div class="w-full hidden lg:flex lg:flex-grow, lg:items-center lg:width-auto