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
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&