3- Learn Flexbox & CSS Grid / Container & items
•
1 like•489 views
Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Any HTML element can be a flex container. Child elements of that container are considered flex items. - A flex container can be displayed as a block (display: flex) or inline (display: inline-flex). - By default, flex items width and height are defined by their content. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3
Recommended
Recommended
More Related Content
Similar to 3- Learn Flexbox & CSS Grid / Container & items
Similar to 3- Learn Flexbox & CSS Grid / Container & items (20)
More from In a Rocket
More from In a Rocket (14)
Recently uploaded
Recently uploaded (20)
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&