FlorianWoelki / flex-vis

🎨 A CSS Flexbox visualizer for better learning experience.

🎨 Flex-Vis

Easily learn the purpose and the usage of the flex grid in CSS with a dynamic website.

🤔 What is this project about?

In this repository, you can see how I built this website, where you can see a visualizer for the flex grid. The purpose is to understand the flex system by actually experimenting with it and see what changes.

The purpose of this project was to experiment with Vue-Cirrus and learning more about the flex system.

There are multiple pages available:

• Align Content
• Align Items
• Align Self
• Flex
• Flex Direction
• Flex Grow
• Flex Shrink
• Flex Wrap
• Justify Content
• Flex Order

📈 Getting Started

Follow these steps, if you want to install the project on your machine:

1. Clone project

git clone https://github.com/FlorianWoelki/flex-vis.git

2. Install dependencies with yarn or npm

npm install
# OR
yarn

3. Start the project

npm run serve
# OR
yarn serve

🛠 Built with

• vue.js
• vue-cirrus
• vuex

🤠 Authors

• Florian Woelki