⚑ A Guide for the concept of Flexbox and responsive design. Simply set the attributes as you needed and copy the CSS code. πŸŽ‰

View project on GitHub




Go to Flexbox-Guide →

⚑ A Guide for the concept of Flexbox and Responsive Design. Simply set the attributes as needed and copy the CSS code. πŸŽ‰


Table of Contents

About Flexbox-Guide

Flexbox-Guide is a website developed for web developers and Coding newbies learning CSS Flexbox Layout. This website can be used for both learning or generating the code. Simply arrange the flex items as you need and copy the CSS to your code.

Before the Flexbox Layout module, there were four layout modes:

  • Block, for sections in a webpage
  • Inline, for text
  • Table, for two-dimensional table data
  • Positioned, for explicit position of an element

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

For detailed explanation please check A Complete Guide to Flexbox by Chris Coyier

Why wait? Straightaway go to the website and join the Awesomeness 😎



Blog about Flexbox-Guide

Blog on Flexbox-Guide


  • Dynamic code generation
  • Tool to πŸ“š learn Flexbox


For Open Source by Open Source technologies:

Reactjs and that’s it. ✌🏼

  • react ^17.0.1
  • react-dom ^17.0.1
  • react-scripts 4.0.1
  • react-toastify ^6.2.0
Dev Dependencies
  • eslint: ^7.19.0
  • eslint-plugin-react: ^7.22.0
  • gh-pages: ^3.1.0


Clone/download the repository on your local machine.
`git clone https://github.com/Souravdey777/flexbox-guide.git`
Install dependencies
`npm install` or `yarn install`
Run Snap Shot from the root directory. πŸš€
`npm start` or `yarn start`
Alternatively you can use Gitpod

Open in Gitpod

Contribution and Support

Loved it!. ⭐ Star the Repository and support the project.

Upvote in πŸš€ Product Hunt.

Flexbox-Guide - Flexbox-Guide : A flexbox code generator | Product Hunt

Open a Pull Request or Raise an Issue.

πŸ‘¨β€πŸš€ Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Buy Me A Coffee


πŸ“ Distributed under the MIT License. See LICENSE for more information.


Portfolio LinkedIn Twitter Mail Medium Coder Rank Product Hunt Speaker Deck Instagram

Learn More about Flexbox

Check the references below:
If you want to practice using flexbox, try out these games and apps that will help you master flexbox.
  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
  • Flexbox Patters is a website that shows off a bunch of Flexbox examples.

Learn More about Reactjs

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration


This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify