The Flexbox Formula
CSS Layouts and Responsive Design
Learning Outcome
5
Build navigation bars using Flexbox layout.
4
Use child properties to control items.
3
Apply parent Flexbox properties effectively.
2
Create flexible and responsive webpage layouts.
1
Understand Flexbox layout system and benefits.
What is Flexbox?
Flexbox stands for Flexible Box Layout. It is a CSS layout system used to arrange elements efficiently inside containers.
Align items
Distribute space
Create responsive layouts
display: flex
Converts a normal container into a Flexbox container. All direct children become flex items.
.container {
display: flex;
}
1
2
3
Why Flexbox?
Flexible & responsive layouts
Powerful alignment capabilities
Reorder elements without changing HTML
1
4
3
5
6
2
Main Axis & Cross Axis
The Main Axis is the primary direction in which flex items are arranged. It depends on flex-direction.
The Cross Axis is the direction perpendicular to the Main Axis
1
2
3
Main axis
Cross axis
Main Axis & Cross Axis
The Main Axis is the primary direction in which flex items are arranged. It depends on flex-direction.
The Cross Axis is the direction perpendicular to the Main Axis
1
2
3
Main axis
Cross axis
Flexbox Axes
row
column
row-reverse
column-reverse
main axis
cross axis
How Can We Align Items Along Main Axis?
Flexbox offers alignment options such as justify-content to position items along the main axis
justify-content: start;
justify-content: center;
justify-content: space-between;
justify-content: space-around ;
Main axis
Space
Home
Explore
Event
About
justify-content: start;
How Can We Align Items Along Main Axis?
Flexbox offers alignment options such as justify-content to position items along the main axis
justify-content: start;
justify-content: center;
justify-content: space-between;
justify-content: space-around ;
Main axis
Space
Home
Explore
Event
About
justify-content: center;
How Can We Align Items Along Main Axis?
Flexbox offers alignment options such as justify-content to position items along the main axis
justify-content: start;
justify-content: center;
justify-content: space-between;
justify-content: space-around ;
justify-content: space-between;
Main axis
Space
Home
Explore
Event
About
How Can We Align Items Along Main Axis?
Flexbox offers alignment options such as justify-content to position items along the main axis
justify-content: start;
justify-content: center;
justify-content: space-between;
justify-content: space-around ;
Main axis
Space
Home
Explore
Event
About
justify-content: space-around ;
By using align-item property we can control the spacing between flex items along cross-axis
How To Control Spacing Between Flex Items?
Cross Axis
Space
Home
Explore
Event
About
align - items: start;
align - items: center;
align - items: end;
align - items: stretch;
align - items: start;
Galaxy
Explore
By using align-item property we can control the spacing between flex items along cross-axis
How To Control Spacing Between Flex Items?
Cross Axis
Space
Home
Explore
Event
About
align - items: start;
align - items: center;
align - items: end;
align - items: stretch;
align - items: center;
Galaxy
Explore
By using align-item property we can control the spacing between flex items along cross-axis
How To Control Spacing Between Flex Items?
Cross Axis
Space
Home
Explore
Event
About
align - items: start;
align - items: center;
align - items: end;
align - items: stretch;
align - items: end;
Galaxy
Explore
By using align-item property we can control the spacing between flex items along cross-axis
How To Control Spacing Between Flex Items?
Cross Axis
Space
Home
Explore
Event
About
align - items: start;
align - items: center;
align - items: end;
align - items: stretch;
Galaxy
Explore
How Does This Element Fit Exactly In The Middle?
Galaxy
Explore
Cross Axis
Space
Home
Explore
Event
About
align - items: center;
align - items: center;
justify-content: center;
Main axis
justify-content: center;
Galaxy
Explore
Cross Axis
Space
Home
Explore
Event
About
Main axis
Main axis
Cross Axis
How Can We Align Items Along Cross Axis?
Flexbox offers alignment options such as align-content to position items along the cross axis
align - content: start;
align - content: center;
align - content: space-between;
align - content: space-around;
Space
Home
Explore
Event
About
Galaxy
Explore
Cross Axis
--- Exhibition Gallery ---
align - content: start;
How Can We Align Items Along Cross Axis?
Flexbox offers alignment options such as align-content to position items along the cross axis
align - content: start;
align - content: center;
align - content: space-between;
align - content: space-around;
Space
Home
Explore
Event
About
Galaxy
Explore
Cross Axis
--- Exhibition Gallery ---
align - content: center;
How Can We Align Items Along Cross Axis?
Flexbox offers alignment options such as align-content to position items along the cross axis
align - content: start;
align - content: center;
align - content: space-between;
align - content: space-around;
Cross Axis
align - content: center;
How Can We Align Items Along Cross Axis?
Flexbox offers alignment options such as align-content to position items along the cross axis
align - content: start;
align - content: center;
align - content: space-between;
align - content: space-around;
Cross Axis
align - content: space-between;
How Can We Align Items Along Cross Axis?
Flexbox offers alignment options such as align-content to position items along the cross axis
align - content: start;
align - content: center;
align - content: space-between;
align - content: space-around;
Cross Axis
align - content: space-around;
How To Change The Direction Of Flex Items?
By using flex-direction properties
Space
Home
Explore
Event
About
Galaxy
Explore
--- Exhibition Gallery ---
Main axis
1
2
3
4
5
6
7
8
flex - direction: row;
flex - direction: row-reverse;
flex - direction: column;
flex - direction: column-reverse;
flex - direction: row;
How To Change The Direction Of Flex Items?
By using flex-direction properties
Space
Home
Explore
Event
About
Galaxy
Explore
Cross Axis
--- Exhibition Gallery ---
Main axis
8
7
6
5
4
3
2
1
flex - direction: row;
flex - direction: row-reverse;
flex - direction: column;
flex - direction: column-reverse;
flex - direction: row-reverse;
How To Change The Direction Of Flex Items?
Space
Home
Explore
Event
About
Galaxy
Explore
Cross Axis
--- Exhibition Gallery ---
Main axis
flex - direction: row;
flex - direction: row-reverse;
flex - direction: column;
flex - direction: column-reverse;
flex - direction: column;
How To Change The Direction Of Flex Items?
Space
Home
Explore
Event
About
Galaxy
Explore
Cross Axis
--- Exhibition Gallery ---
Main axis
flex - direction: row;
flex - direction: row-reverse;
flex - direction: column;
flex - direction: column-reverse;
flex - direction: column;
How Does CSS Assist Websites In Adjusting Content For Various Screen Sizes?
By using flex-wrap properties
flex-wrap: wrap
Flex items wrap onto multiple lines from top to bottom if there's insufficient space on one line
How Does CSS Assist Websites In Adjusting Content For Various Screen Sizes?
By using flex-wrap properties
flex-wrap: wrap-reverse
Similar to wrap, but the flex items will wrap from bottom to top instead of top to bottom
How Does CSS Assist Websites In Adjusting Content For Various Screen Sizes?
By using flex-wrap properties
flex-wrap: nowrap
Flex items will attempt to fit on one line; if the container is too narrow, they'll overflow
Short-Hand Property For Flex Direction & Flex Wrapping ?
Short-Hand Property For Flex Direction & Flex Wrapping
By using flex-flow property
flex-flow: row wrap;
This sets the flex-direction to row & flex-wrap to wrap
Short-Hand Property For Flex Direction & Flex Wrapping
By using flex-flow property
flex-flow: row-reverse nowrap;
This reverses the row order with no wrapping
Now Let's Explore The Child Properties
Flex child
Flex child
What Is A Flex Child?
Flex child is an individual items within the container that are positioned & sized based on the flex properties applied to the parent
flex-child
Let's See What Are The Various Child Properties
1.
Order
3.
Flex-grow
2.
Flex-shrink
4.
Flex-basis
5.
Align-self
How To Change The Order Of Flex Items Inside The Container?
By using order property
Space
Home
Explore
Event
About
Galaxy
Explore
Cross Axis
--- Exhibition Gallery ---
1
2
3
4
5
6
7
8
flex items
1
2
3
4
5
6
7
8
0
0
0
0
0
0
0
0
Order:
Default order of all is "Zero"
Let's change the order of 2nd child to 1
2
1
Items are positioned based on ascending order values
1
2
3
4
5
6
7
8
2
Output:
0
0
0
0
0
0
0
Order:
1
What Is Order Property?
It allows to control the visual ordering of flex items within their flex container
.item {
order: 2;
}
Syntax
`Flex-grow` allows a flex item to grow relative to other items when there is extra space
What Is Flex-Grow?
The effects are visible on hovering the child due to hover property
.flexBox:hover{
flex-grow: 1;
}`Flex-shrink` allows a flex item to shrink relative to other items when there isn't enough space
What Is Flex-Shrink?
The effects are visible on hovering the child due to hover property
.flexBox:hover{
flex-shrink: 3;
}`Flex-basis` sets the initial size of a flex item before it is adjusted by other flex properties
What Is Flex-Basis?
The effects are visible on hovering the child due to hover property
.flexBox:hover{
flex-basis: 50%;
}'Align-self' controls the alignment of a flex item along the cross axis of its parent flex container
What Is Align-Self?
The item is positioned at the start of the cross axis
.flexBox:hover{
align-self: flex-start;
}What is align-self: flex-start?
'Align-self' controls the alignment of a flex item along the cross axis of its parent flex container
What Is Align-Self?
The item is positioned at the end of the cross axis
.flexBox:hover{
align-self: flex-end;
}'Align-self' controls the alignment of a flex item along the cross axis of its parent flex container
What Is Align-Self?
The item is positioned at the center of the cross axis
.flexBox:hover{
align-self: center;
}Creating Navbar Using Flexbox HTML Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="navbar">
<div class="logo">Travel</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Packages</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}
.navbar{
width:95%;
margin:20px auto;
background:#dbe7f7;
border-radius:18px;
padding:25px 35px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:24px;
font-weight:bold;
color:#2347b5;
}
.nav-links{
display:flex;
gap:40px;
}
.nav-links a{
text-decoration:none;
font-size:18px;
color:#2347b5;
font-weight:500;
}Creating Navbar Using Flexbo HTML Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav class="navbar">
<div class="logo">Travel</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Packages</a>
<a href="#">Contact</a>
</div>
</nav>
</body>
</html>*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}
.navbar{
width:95%;
margin:20px auto;
background:#dbe7f7;
border-radius:18px;
padding:25px 35px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:24px;
font-weight:bold;
color:#2347b5;
}
.nav-links{
display:flex;
gap:40px;
}
.nav-links a{
text-decoration:none;
font-size:18px;
color:#2347b5;
font-weight:500;
}Summary
5
Flexbox creates responsive and organized layouts.
4
Child properties manage size and positioning.
3
Parent properties control layout and alignment.
2
Display flex converts elements into flex items.
1
Flexbox simplifies alignment and space distribution.
Quiz
Which property defines the direction of flex items?
A. flex-wrap
B. flex-direction
C. justify-content
D. gap
Which property defines the direction of flex items?
A. flex-wrap
B. flex-direction
C. justify-content
D. gap
Quiz-Answer
