Flexbox in CSS
? Flexbox in CSS (Flexible Box Layout)
Flexbox is a powerful CSS layout module designed to arrange items in one dimension — either as a row or a column — and distribute space efficiently between them, even when their size is unknown or dynamic.
Key Concepts
Flex container: The parent element with
display: flex;ordisplay: inline-flex;Flex items: The direct children inside the flex container.
How to Use Flexbox
1. Create a flex container:
.container { display: flex; /* or inline-flex */}2. Main Flexbox Properties
| Property | Applies To | Description | Example Values |
|---|---|---|---|
flex-direction | Container | Direction of flex items | row (default), column, row-reverse, column-reverse |
justify-content | Container | Align items horizontally | flex-start, center, space-between, space-around, space-evenly, flex-end |
align-items | Container | Align items vertically (cross axis) | stretch (default), center, flex-start, flex-end, baseline |
flex-wrap | Container | Allow items to wrap onto multiple lines | nowrap (default), wrap, wrap-reverse |
align-content | Container | Align wrapped lines vertically | flex-start, center, space-between, space-around, stretch |
order | Item | Change order of items (default is 0) | any integer |
flex-grow | Item | How much an item grows relative to others | number (default 0) |
flex-shrink | Item | How much an item shrinks relative to others | number (default 1) |
flex-basis | Item | Initial size of item before growing/shrinking | length (px, %), or auto |
align-self | Item | Override container's align-items for one item | auto (default), flex-start, center, flex-end, baseline, stretch |
Example: Simple Row Layout
.container { display: flex; justify-content: space-between; align-items: center; height: 100px; background-color: #eee;}.item { background-color: #3498db; color: white; padding: 20px; border-radius: 5px;}<div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div></div>Example: Column Layout with Wrapping
.container { display: flex; flex-direction: column; flex-wrap: wrap; height: 300px;}Why Use Flexbox?
Easy alignment and distribution of space.
Works well for dynamic or unknown sizes.
Great for responsive layouts.
Simple to reorder items visually without changing HTML.
If you want, I can help you build a real example or explain any flexbox property in detail!
