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.
css stack items horizontally, css stack elements vertically, html div horizontal elements, css inline block horizontal align, divs stacking vertically instead of horizontally
How to make use of it:
1. Load the primary 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 item vertically.
<div class="flex vstack"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
5. Add a spacer 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 whether or not to auto swap between HStack and VStack for tablet/desktop:
<div class="flex vstack hstack@md"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>
Horizontally & Vertically Stack Grid Items, HStack and VStack in CSS Plugin/Github, css stack divs vertically flex, html place elements horizontally, stack columns css
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.
Be First to Comment