Flex on Larger Devices

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
     divide-black divide-y lg:divide-y-0" id="navbar-menu">
  <a class="block lg:mr-4 p-2 hover:bg-gray-200">Blog</a>
  ... 
</div>

The outer div here is hidden on small screens to start. This is usually paired with JavaScript to make it not hidden. On a small screen, when it’s unhidden, it will use the default display mode of block, meaning columns. At larger sizes, the lg:flex overrides the hidden utility, and the display is flex and .flex-grow, meaning the items will fit across the screen. We have also added a dividing line between items at small scale, .divide-y, but the line goes away at larger sizes. The .lg:divide-y-0 utility makes the items more distinguishable in the small column.

The inner items have a little bit more right margin at large sizes, and they change their background to gray on when we hover over them. They need to be explicitly set to block because a tags are inline by default. If we made those div tabs, we won’t need the .block.

Navbar

To create a navbar, we need a little JavaScript. The following snippet, vanilla JavaScript without a framework, assumes we have three elements. One is the navbar itself, with a DOM ID of navbar-menu. The other two elements are hidden in the same spacing and are the hamburger menu, navbar-burger, and an x-shaped close element, navbar-close: