-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
A Flex Container is the parent element in a flexbox layout that holds flex items. By setting display: flex
or display: inline-flex
on an element, it becomes a flex container, and its direct children automatically become flex items.
The flex container controls the flow, direction, alignment, spacing, and wrapping of the items inside it.
.container {
display: flex; /* or inline-flex */
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Property | Description |
---|---|
display |
Defines flex behavior: flex or inline-flex |
flex-direction |
Sets the direction of items (row, column, etc.) |
flex-wrap |
Controls whether items wrap or stay in one line |
flex-flow |
Shorthand for flex-direction and flex-wrap |
justify-content |
Aligns items horizontally within the container |
align-items |
Aligns items vertically within the container |
align-content |
Aligns multi-line rows (used with wrapping) |
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #f2f2f2;
}
/* Horizontal */
.container {
display: flex;
flex-direction: row;
}
/* Vertical */
.container {
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex-wrap: wrap;
}
✅ Write CSS for the following:
Q1. Create a flex container with horizontal layout.
Q2. Create a flex container with vertical layout.
Q3. Make a container that allows its items to wrap.
Q4. Center items in the middle of the container.
Q5. Align items to the bottom using align-items
.
Q6. Space items equally using justify-content
.
Q7. Reverse the order of items.
Q8. Create a container using inline-flex
.
Q9. Set different wrap and direction using flex-flow
.
Q10. Add spacing between rows using align-content
.
CSS Basics
CSS Styling Properties
CSS Box Model
CSS Margin
CSS Padding
CSS Borders
CSS Outline
CSS Height/Width
CSS Max-width
CSS Display
CSS Position
CSS Z-index
CSS Overflow
CSS Float
CSS Inline-block
CSS Align
CSS Box Sizing
CSS Text
CSS Fonts
CSS Icons
CSS Text Effects
CSS Web Fonts
CSS Colors
CSS Backgrounds
CSS Color Keywords
CSS Gradients
CSS Shadows
CSS Links
CSS Lists
CSS Tables
CSS Advanced Selectors & Features
CSS Combinators
CSS Pseudo-classes
CSS Pseudo-elements
CSS Attribute Selectors
CSS Specificity
CSS !important
CSS Units
CSS Variables
CSS @property
CSS Math Functions
CSS Media and Image Styling
CSS Image Styling
CSS Image Centering
CSS Image Filters
CSS Image Shapes
CSS object-fit
CSS object-position
CSS Masking
CSS Layout Techniques
CSS Website Layout
CSS Navigation Bar
CSS Dropdowns
CSS Image Gallery
CSS Counters
CSS Pagination
CSS Multiple Columns
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)