https://github.com/florianwoelki/flex-vis

🎨 A CSS Flexbox visualizer for better learning experience.
https://github.com/florianwoelki/flex-vis

flexbox flexbox-css flexbox-samples typescript vue-flex vuejs

Last synced: about 1 month ago
JSON representation

🎨 A CSS Flexbox visualizer for better learning experience.

• Host: GitHub
• URL: https://github.com/florianwoelki/flex-vis
• Owner: FlorianWoelki
• License: mit
• Created: 2020-01-10T09:14:00.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-13T22:18:10.000Z (almost 2 years ago)
• Last Synced: 2023-03-02T14:32:00.523Z (over 1 year ago)
• Topics: flexbox, flexbox-css, flexbox-samples, typescript, vue-flex, vuejs
• Language: Vue
• Homepage: https://florianwoelki.github.io/flex-vis/#/
• Size: 3.63 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
🎨 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](https://github.com/FlorianWoelki/vue-cirrus/) and learning more about the flex system.

There are multiple pages available:

* [Align Content](https://florianwoelki.github.io/flex-vis/#/flexOptions/aligncontent)

* [Align Items](https://florianwoelki.github.io/flex-vis/#/flexOptions/alignitems)

* [Align Self](https://florianwoelki.github.io/flex-vis/#/flexOptions/alignself)

* [Flex](https://florianwoelki.github.io/flex-vis/#/flexOptions/flex)

* [Flex Direction](https://florianwoelki.github.io/flex-vis/#/flexOptions/flexdirection)

* [Flex Grow](https://florianwoelki.github.io/flex-vis/#/flexOptions/flexgrow)

* [Flex Shrink](https://florianwoelki.github.io/flex-vis/#/flexOptions/flexshrink)

* [Flex Wrap](https://florianwoelki.github.io/flex-vis/#/flexOptions/flexwrap)

* [Justify Content](https://florianwoelki.github.io/flex-vis/#/flexOptions/justifycontent)

* [Flex Order](https://florianwoelki.github.io/flex-vis/#/flexOptions/order)

## 📈 Getting Started

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

1. Clone project

```shell

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

```

2. Install dependencies with `yarn` or `npm`

```shell

npm install

# OR

yarn

```

3. Start the project

```shell

npm run serve

# OR

yarn serve

```

## 🛠 Built with

- [vue.js](https://vuejs.org/)

- [vue-cirrus](https://florianwoelki.github.io/vue-cirrus/#/)

- [vuex](https://vuex.vuejs.org/)

## 🤠 Authors

- [Florian Woelki](https://florianwoelki.com)