-
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)
Flexbox, or the Flexible Box Layout, is a one-dimensional layout model in CSS that provides an efficient way to lay out, align, and distribute space among items in a container — even when their size is unknown or dynamic.
It is ideal for designing responsive layouts, navigation bars, card layouts, and more.
Works in one dimension – row or column.
Uses a flex container and flex items.
Provides easy alignment (horizontal/vertical).
Automatically adjusts to different screen sizes.
<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
.flex-container {
display: flex;
}
Property | Description |
---|---|
display: flex |
Enables flexbox on a container |
flex-direction |
Row (default) or column |
flex-wrap |
Allows wrapping of items |
justify-content |
Aligns items horizontally |
align-items |
Aligns items vertically |
align-content |
Aligns rows when wrapped |
flex-direction
flex-direction: row | row-reverse | column | column-reverse;
justify-content
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
align-items
align-items: stretch | flex-start | center | flex-end | baseline;
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid #000;
}
✅ Write CSS for the following:
Q1. Create a flex container with three items in a row.
Q2. Center all items both horizontally and vertically.
Q3. Change direction to column.
Q4. Add space between items using justify-content
.
Q5. Make items wrap to the next line using flex-wrap
.
Q6. Align items to the bottom using align-items
.
Q7. Reverse the order of items.
Q8. Create equal-width cards using flex: 1
.
Q9. Combine flex-direction: column
with vertical centering.
Q10. Make a responsive navigation bar using Flexbox.
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)