KEMBAR78
3- Learn Flexbox & CSS Grid / Container & items | PDF
IN A ROCKET
Learn front-end development at rocket speed
CSS FLEXBOX & CSS GRID
ContainerItems&
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.
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.
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
FLEXBOX
Flex container
Flex

item
Flex

item
Flex

item
Any HTML element
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Flex

container CAN BE
Block
Inline
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
display
flex

inline-flex
(default)
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
display
flex
inline-flex
(default)
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Flex container
width = block (100%)
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
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
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
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
display
flex

inline-flex
(default)
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
Flex container
width = inline
Other inline elements

could go here.
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.
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
FLEXBOX & CSS GRID: The CSS layout nightmare is over inarocket.com
display
flex

inline-flex
(default)
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
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
IN A ROCKET
Learn front-end development at rocket speed
CSS FLEXBOX & CSS GRID
ContainerItems&

3- Learn Flexbox & CSS Grid / Container & items

  • 1.
    IN A ROCKET Learnfront-end development at rocket speed CSS FLEXBOX & CSS GRID ContainerItems&
  • 2.
    FLEXBOX & CSSGRID: 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 & CSSGRID: 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 & CSSGRID: The CSS layout nightmare is over inarocket.com FLEXBOX Flex container Flex
 item Flex
 item Flex
 item Any HTML element
  • 5.
    FLEXBOX & CSSGRID: The CSS layout nightmare is over inarocket.com Flex
 container CAN BE Block Inline
  • 6.
    FLEXBOX & CSSGRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
  • 7.
    FLEXBOX & CSSGRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
  • 8.
    FLEXBOX & CSSGRID: The CSS layout nightmare is over inarocket.com Flex container width = block (100%)
  • 9.
    FLEXBOX & CSSGRID: 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 & CSSGRID: 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 & CSSGRID: 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 & CSSGRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
  • 13.
    FLEXBOX & CSSGRID: The CSS layout nightmare is over inarocket.com Flex container width = inline Other inline elements
 could go here.
  • 14.
    FLEXBOX & CSSGRID: 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 & CSSGRID: 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 & CSSGRID: The CSS layout nightmare is over inarocket.com display flex inline-flex (default)
  • 17.
    Learn front-end developmentat 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 yourtime
 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 Learnfront-end development at rocket speed CSS FLEXBOX & CSS GRID ContainerItems&