HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements horizontally inline or stack elements vertically on top of each other with Flexbox CSS.
Must Read: Create Cross-Browser Full-Page Layouts With HTML and CSS
How to make use of it:
1. Load the stylesheet styles.css from the src folder.
<link rel="stylesheet" href="./src/styles.css" />
2. Add the required CSS class ‘flex’ to your grid system.
<div class="flex"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
3. Stack grid objects horizontally.
<div class="flex hstack"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
4. Stack grid items vertically.
<div class="flex vstack"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
5. Add a class to the grid system.
<div class="flex hstack"> <div>Item 1</div> <div>Item 2</div> <div class="spacer"></div> <div>Item 3</div> </div>
6. Determine to auto swap between HStack and VStack for tablet/desktop:
<div class="flex vstack [email protected]"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
See Demo And Download
Official Website(ItsJonQ): Click Here
This superior jQuery/javascript plugin is developed by ItsJonQ. For extra advanced usage, please go to the official website.
