Currently Empty: ₹0.00
Flexbox Introduction
CSS CODES & EXAMPLES
CSS Flexbox Introduction
Learn the fundamentals of CSS Flexbox and how to create flexible, responsive layouts with rows, columns, alignment, spacing and distribution.
01
What is CSS Flexbox?
A modern one-dimensional layout systemFlexbox, short for Flexible Box Layout, is a CSS layout system designed to arrange elements in a row or column. It makes alignment, spacing and responsive layouts much easier to manage.
Flexible
Items can grow and shrink according to available space.
Responsive
Flexbox works well with different screen sizes.
Alignment
Items can be aligned horizontally and vertically.
Spacing
Space between items can be controlled easily.
02
display: flex
Create a flex container
To start using Flexbox, apply
display: flex; to the parent element.
Its direct children automatically become flex items.
display-flex.css
.container {
display: flex;
}ITEM 1
ITEM 2
ITEM 3
03
Flex Container and Flex Items
Understand the parent-child relationship
The element with display: flex becomes the
flex container. Its direct children become
flex items.
FLEX CONTAINER
Flex Item
Flex Item
Flex Item
04
Default Flex Direction
Items are arranged in a row by defaultflex-row.css
.container {
display: flex;
flex-direction: row;
}1
2
3
4
05
Flex Direction: Column
Arrange items verticallyflex-column.css
.container {
display: flex;
flex-direction: column;
}ITEM 1
ITEM 2
ITEM 3
06
justify-content
Control the main-axis alignment
The justify-content property controls how flex
items are distributed along the main axis.
justify-content.css
.container {
display: flex;
justify-content: space-between;
}ONE
TWO
THREE
07
align-items
Control cross-axis alignment
The align-items property controls the alignment
of flex items across the cross axis.
align-items.css
.container {
display: flex;
align-items: center;
}ITEM A
ITEM B
ITEM C
08
gap
Add consistent spacing between flex items
The gap property creates consistent spacing
between flex items without needing individual margins.
gap.css
.container {
display: flex;
gap: 20px;
}BOX 1
BOX 2
BOX 3
09
Perfect Centering
Center content horizontally and verticallycenter.css
.container {
display: flex;
justify-content: center;
align-items: center;
}
PERFECTLY CENTERED
10
flex-wrap
Allow items to move onto multiple linesflex-wrap.css
.container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}ITEM 1
ITEM 2
ITEM 3
ITEM 4
ITEM 5
ITEM 6
11
Practical Card Layout
A real website Flexbox exampleHTML Course
Learn the structure of modern web pages.
View Course →CSS Course
Learn styling, layouts and responsive design.
View Course →JavaScript
Learn programming and interactive websites.
View Course →12
Flexbox Quick Reference
Important properties| Property | Purpose | Example |
|---|---|---|
display | Creates flex container | display:flex |
flex-direction | Sets row or column | row |
justify-content | Main-axis alignment | center |
align-items | Cross-axis alignment | center |
gap | Spacing between items | 20px |
flex-wrap | Controls wrapping | wrap |
13
Practice Task
Build your first Flexbox layout🎯 Create a Three-Card Layout
Create three course cards and arrange them horizontally using Flexbox.
- Use
display: flex; - Add
gap: 20px; - Use
justify-content: space-between; - Add
flex-wrap: wrap; - Make the cards responsive.
14
CSS Flexbox Live Example
Run the practical exampleLIVE PREVIEW