This training teaches how to build real website layouts using Flexbox. Flexbox is a modern CSS layout system that helps you design responsive and flexible web pages easily.
Introduction to Flexbox
Flexbox is a one dimensional layout system used to arrange elements in rows or columns. It allows you to control alignment spacing and distribution of items inside a container.
Why use Flexbox
Flexbox makes layout design simple and responsive. It reduces the need for floats and complex positioning. It works well for both small components and full page layouts.
Flex Container and Flex Items
A flex container is the parent element where Flexbox is applied. All child elements inside it become flex items.
Example
.container {
display: flex;
}
Main Axis and Cross Axis
The main axis is the direction in which flex items are placed. By default it is horizontal. The cross axis is perpendicular to the main axis.
Flex Direction
This property defines the direction of the layout.
Example
.container {
display: flex;
flex-direction: row;
}
You can also use column to stack items vertically.
Justify Content
This property controls alignment along the main axis.
Example
.container {
display: flex;
justify-content: center;
}
Other values include flex start flex end space between and space around.
Align Items
This property aligns items along the cross axis.
Example
.container {
display: flex;
align-items: center;
}
Flex Wrap
Flexbox allows items to wrap into multiple lines if needed.
Example
.container {
display: flex;
flex-wrap: wrap;
}
Gap
You can add spacing between items using gap.
Example
.container {
display: flex;
gap: 20px;
}
Building a Real Website Layout
Header Section
Use Flexbox to align logo and navigation menu in one line.
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
Sidebar and Content
Create a two column layout using Flexbox.
.main {
display: flex;
}
.sidebar {
width: 30%;
}
.content {
width: 70%;
}
Responsive Design
Flexbox helps create layouts that adjust on different screen sizes. You can use media queries to change layout direction.
Example
@media (max-width: 768px) {
.main {
flex-direction: column;
}
}
Conclusion
Flexbox is a powerful tool for creating real website layouts. By understanding its core properties you can design modern responsive pages easily.
Practice by creating a full webpage layout including header sidebar content and footer using Flexbox.