https://github.com/telagraphic/flexulator

A visual flexbox space distribution calculator
https://github.com/telagraphic/flexulator

css flex flexbox

Last synced: 3 months ago
JSON representation

A visual flexbox space distribution calculator

• Host: GitHub
• URL: https://github.com/telagraphic/flexulator
• Owner: telagraphic
• Created: 2018-10-10T13:11:46.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T06:16:34.000Z (over 1 year ago)
• Last Synced: 2024-07-18T03:44:34.809Z (4 months ago)
• Topics: css, flex, flexbox
• Language: HTML
• Homepage: https://www.flexulator.com
• Size: 38.6 MB
• Stars: 178
• Watchers: 6
• Forks: 4
• Open Issues: 24
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Inspired By

- [Understanding Flexbox by Made by Mike](https://www.madebymike.com.au/writing/understanding-flexbox/)

- [Flexbox Adventures by Chris Wright](https://chriswrightdesign.com/experiments/flexbox-adventures/)

- [Designing the Flexbox Inspector](https://hacks.mozilla.org/2019/01/designing-the-flexbox-inspector/)

# Rachel Andrew Series on Flexbox

- [What Happens When You Create A Flexbox Flex Container?](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)

- [Everything You Need To Know About Alignment In Flexbox](https://www.smashingmagazine.com/2018/08/flexbox-alignment/)

- [Flexbox: How Big Is That Flexible Box?](https://www.smashingmagazine.com/2018/09/flexbox-sizing-flexible-box/)

- [Use Cases For Flexbox](https://www.smashingmagazine.com/2018/10/flexbox-use-cases/)

# Learn

- [Flexbox Defense](http://www.flexboxdefense.com/)

- [Flexbox Froggie](https://flexboxfroggy.com/)

- [Learn Flexbox Layout](http://learnlayout.com/flexbox.html)

- [Flexbox in 5 Minutes](https://cvan.io/flexboxin5/)

- [Wes Bos: What The Flexbox Course](https://www.flexbox.io)

# Deeper Reads

- [Flex Basis Versus Width](https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width)

- [What Does Flex Basis Do?](https://stackoverflow.com/questions/23569229/what-exactly-flex-basis-property-sets)

- [The Difference Between Width and Flex Basis](https://mastery.games/post/the-difference-between-width-and-flex-basis/)

# Tools

- [Flexbox Tester](https://www.madebymike.com.au/demos/flexbox-tester/)

- [Flexbox Playground and Code Generator](http://the-echoplex.net/flexyboxes/)

- [Flexbox Generator](https://loading.io/flexbox/)

- [Flexbox Playground](https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/)

# Guides

- [CSS-Tricks Flexbox Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

- [Codrops Guide](https://tympanus.net/codrops/css_reference/flexbox/)

- [Mozilla Guide](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)

- [Scrimba Course](https://scrimba.com/g/gflexbox)

- [The Complete CSS Flexbox Tutorial](https://medium.com/@js_tut/the-complete-css-flex-box-tutorial-d17971950bdc)

# Specs

- [Display Module](https://www.w3.org/TR/css-display-3/#intro)

- [Box Alignment](https://www.w3.org/TR/css-align-3/)

- [Flexbox Layout Algorithm](https://drafts.csswg.org/css-flexbox/#layout-algorithm)