Simple 2-Column Flex Code Generator
The 2-column flexbox code generator was created so I don't have to create the CSS from scratch every time I want to have 2 width-responsive columns.
You may have seen web pages that are 2 columns side by side when you view them with a wide browser window. Generally, the columns are a content column and a navigation/
When you narrow the browser window slightly, the content column also narrows slightly. When you make the browser window sufficiently narrow, the 2 side-by-side columns rearrange their positioning so they are stacked on top of each other.
Generating the CSS for that type of layout is what the generator is for. (The generator has an illustration to assist visualizing the 2-column layout and the stacking for narrow browser widths.)
Originally, the generator was made for myself. This week, I made it a bit more user friendly so I could share the link with you.
The generator is located in what started out as a private area named Will's Tools at a tools website. Privacy has been removed. Yet, I don't intend to advertise its existence other than to mention a tool in it once in a while.
If you are familiar with Flexbox CSS, the Simple 2-Column Flex Code Generator is self-explanatory. If you are not familiar with Flexbox, this Mozilla learning page is a place to start learning about it. Flexbox CSS is a wonderful tool for flexible divs.
The CSS flexbox code can be used within other boxes. It is not just for general web page layout. Other boxes might be a separate div, a cell within a table (a td), or even within floating content.
Simple 2-Column Flex Code Generator lets you quickly obtain the basic CSS. You may then, of course, tweak the CSS as needed for your web page.
(This content first appeared in Possibilities newsletter.)
Will Bontrager
