harshk30 / flexbox-visualizer

Easily see how Flexbox properties work.

Home Page:https://castlemaninc.github.io/flexbox-visualizer

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flexbox Visualizer - Day 4 of 100 #100DaysOfCode

Currently this project allows a user to visualize flexbox properties.

The Flexbox properties that are demonstrated are:

  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-wrap: nowrap | wrap | wrap-reverse;
  • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
  • align-items: flex-start | flex-end | center | baseline | stretch;
  • align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Live link

https://castlemaninc.github.io/flexbox-animated/

About

Easily see how Flexbox properties work.

https://castlemaninc.github.io/flexbox-visualizer


Languages

Language:HTML 35.2%Language:CSS 32.8%Language:JavaScript 32.0%