https://github.com/mhasan320/css-flexbox-365

A simple project based on CSS Flexbox. The live project Link is below:
https://github.com/mhasan320/css-flexbox-365

css flexbox front-end-development

Last synced: 3 days ago
JSON representation

A simple project based on CSS Flexbox. The live project Link is below:

• Host: GitHub
• URL: https://github.com/mhasan320/css-flexbox-365
• Owner: mhasan320
• Created: 2022-01-01T06:18:09.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-01T08:02:28.000Z (about 3 years ago)
• Last Synced: 2024-11-09T19:12:31.673Z (about 2 months ago)
• Topics: css, flexbox, front-end-development
• Language: CSS
• Homepage: https://codepen.io/mhhasan320/pen/ZEXxLZB
• Size: 5.86 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CSS Flexbox Project

Project Live Demo Link:  https://codepen.io/mhhasan320/pen/ZEXxLZB

![Project-1](https://user-images.githubusercontent.com/16065340/147846582-b5cab11f-e77b-4ab7-b39d-b899a87fb3c4.png)

 

# CSS FlexBox ChectSheet

* flex contianer properties for the parent 



1. display: flex // or inline-flex  


2. flex-direction: row | row-reverse | column | column-reverse 


3. flex-wrap: nowrap | wrap | wrap-reverse


4. flex-flow: column wrap  // shorthand for the flex-direcition and flex-wrap  


5. Justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly  


6. align-items: flex-start | flex-end | center | stretch | baseline 


7. align-content: flex-start | flex-end | center | stretch | space-between | space-around 


8. gap: {value}px/%/em/rem; 


9. gap: 10px 20px; // row-gap column gap 


10. row-gap: 10px; 


11. column-gap: 20px 


* flex items properties for the Children



1. Order: 5: // default is 0


2. flex-grow: 4; // default is 0 negative numbers are invalid 


3. flex-shrink: 3 // default is 0 negative numbers are invalid


4. flex-basis: starting width | auto // default auto 


5. flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] {Example: flex: 0 1 100px or flex: 1 or flex: 1 1 0%} 


6. align-self: auto | flex-start | flex-end | center | baseline | stretch

 

 To know More About Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/