/flexbox-playground

This web app provides a playground for practicing CSS Flexbox layout properties.

Primary LanguageHTML

FlexBox playground

Description

This web app provides a playground for practicing CSS Flexbox layout properties. You can dynamically adjust various flex properties and see the changes in real-time.

Live Demo

You can try the live demo of the app here.

Features

  • Interactive controls to manipulate flex properties such as justify-content, align-items, align-content, flex-direction, flex-wrap, row-gap, column-gap, align-self, flex-basis, order, flex-grow, and flex-shrink.
  • Visual representation of flex containers and child elements with different flex properties applied.
  • Responsive design to ensure usability on various screen sizes.

Technologies Used

  • HTML
  • CSS
  • JavaScript

Usage

  1. Clone this repository to your local machine:
git clone https://github.com/salimov333/flexbox-playground.git

  1. Open index.html in your web browser.

  2. Use the interactive controls in the left panel to adjust flex properties and see the changes applied to the flex container and child elements in the right panel.

  3. Experiment with different combinations of flex properties to understand their effects on layout and alignment.

Contributing

If you'd like to contribute to this project, please follow these guidelines:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature-name).
  3. Make your changes.
  4. Commit your changes (git commit -am 'Add some feature').
  5. Push to the branch (git push origin feature/your-feature-name).
  6. Create a new Pull Request.

Credits

This web app was created by Salem Helwani