3- Learn Flexbox & CSS Grid / Container & items
1 like562 views
The document discusses learning front-end development using CSS Flexbox and Grid, emphasizing the ease of creating layouts. It highlights the differences between the two CSS layout systems with practical examples. The content is designed to be straightforward, allowing learners to quickly grasp the concepts and apply them in real projects.
3- Learn Flexbox & CSS Grid / Container & items
- 1. IN A ROCKET Learn front-end development at rocket speed CSS FLEXBOX & CSS GRID ContainerItems&
- 2. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com CSS GRID LAYOUT FLEXIBLE BOX LAYOUT Single-axis–oriented. Optimized for 2-dimensional layouts. Flexbox focuses on space distribution within an axis.
- 3. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com CSS GRID LAYOUT FLEXIBLE BOX LAYOUT Single-axis–oriented. Optimized for 2-dimensional layouts. Flexbox focuses on space distribution within an axis.
- 4. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com FLEXBOX Flex container Flex item Flex item Flex item Any HTML element
- 5. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Flex container CAN BE Block Inline
- 6. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
- 7. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
- 8. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Flex container width = block (100%)
- 9. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Content goes here. Flex item Flex container Width and height defined by its content. Content goes here. Flex item Even more content goes here. Flex item
- 10. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com DISPLAY FLEX <body> <div class="container"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4 here</div> </div> </body> HTML CSS .container {display: flex;} Browser Web page title index.html Item1 Item2 Item3 Item4 here container
- 11. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com DISPLAY FLEX <body> <ul class="container"> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4 here</li> </ul> </body> HTML CSS .container {display: flex;} Browser Web page title index.html Item1 Item2 Item3 containerItem4 here
- 12. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
- 13. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Flex container width = inline Other inline elements could go here.
- 14. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com Content goes here. Content goes here. Even more content goes here. Flex item Flex container Width and hight defined by its content. Flex item Flex item Other inline elements could go here.
- 15. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com DISPLAY INLINE-FLEX <body> <div class="container"> <div>Item1</div> <div>Item2</div> <div>Item3</div> <div>Item4 here</div> </div> </body> HTML CSS .container {display: inline-flex;} Browser Web page title index.html containerItem1 Item2 Item3 Item4 here
- 16. FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
- 17. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES
- 18. We respect your time No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code Real code you can just copy and paste into your real projects. Step by step guides Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com
- 19. IN A ROCKET Learn front-end development at rocket speed CSS FLEXBOX & CSS GRID ContainerItems&