Skip to content
Create flexible layouts easily with this generator.
JavaScript CSS HTML
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Updated Project for first release Oct 4, 2019
src Enabled Generation of codes Oct 7, 2019
.gitignore Ignored testing files Oct 7, 2019 Updated Oct 4, 2019 Added an idea for shrink and order Oct 6, 2019
package-lock.json Include (px) as div title dimension Oct 4, 2019
package.json Updated Project to first release Oct 4, 2019

CSS-Flex Generator

I was inspired by Sarah Drasner's project - CSS-Grid Generator - and decided to build something similar for flex containers.


Ever since the introduction of Flex and Grid Containers, layouts have become easy to create as they are also flexible.

This project provides an easy means for creating CSS Flex containers for flexible layouts. It aids in efficient understanding of the flex property and (soon) it would be able to generate codes. It was built with basic React by create-react-app

Goals for the project

  • Make use of other elements in place of divs such as paragraphs, headers and pictures.
  • Individual resizing of the elements instead of a general size
  • Generate HTML and CSS Goals from the designed layout.


Contributions are highly welcomed as this project hopes to meet it's goals. Also, ideas are welcomed which could be implemented on the project.

To contribute

Fork this repository then download
git clone
Change to the directory
cd cssflex-generator
Install Dependencies
npm install
Start the server
npm start
Make your changes

You could make changes in the project itself or contribute your ideas in the file. Ideas would be added to the Goals of the project if accepted. Ideas should be added in this format:

  • your-name (optional: social media link): your-idea

Check The Idea file to see a sample

Push to your repository
Create Pull Request
Add Upstream
git remote add upstream

Make this repository an upstream for easy syncing and follow up.

PS: You can also contribute by editing or adding to this documentation : )

You can’t perform that action at this time.