![cover-img](https://project-assets.showwcase.com/1420x/59062/1670750298554-1670750297086-flexbox.png?type=webp)
CSS Flexbox in pictures
11 December, 2022
3
3
0
Contributors
•
•
•
•
Flexbox Model
•
•
![img](https://project-assets.showwcase.com/1065x/59062/1670766824301-flex-overall.png?type=webp)
Flexbox Model
Flexbox Properties
Flex Container Properties
1.
2.
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783901891-f-direction-r.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783955664-f-direction-rr.png?type=webp)
•
![img](https://project-assets.showwcase.com/183x438/59062/1670784520125-f-direction-c.png?type=webp)
•
![img](https://project-assets.showwcase.com/183x438/59062/1670784546618-f-direction-rc.png?type=webp)
3.
•
![img](https://project-assets.showwcase.com/1065x/59062/1670784259773-f-wrap-w.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670784311251-f-wrap-nw.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670784354741-f-wrap-wr.png?type=webp)
5.
•
![img](https://project-assets.showwcase.com/1065x/59062/1670782943517-jc-center.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670782979529-jc-start.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783046388-jc-end.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783070523-jc-s-between.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783098280-jc-s-around.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783145574-jc-s-evenly.png?type=webp)
6.
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783195381-ai-stretch.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783246184-ai-start.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783276681-ai-end.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783310404-ai-center.png?type=webp)
•
![img](https://project-assets.showwcase.com/1065x/59062/1670783344574-ai-baseline.png?type=webp)
Flex Item Properties
1.
![img](https://project-assets.showwcase.com/1065x/59062/1670784640402-order.png?type=webp)
2.
![img](https://project-assets.showwcase.com/1065x/59062/1670784694622-flex-grow.png?type=webp)
css
responsive
flexbox
develevate