1. Flex Container & Flex Items
Flexbox is a one-dimensional layout system. A flex container is created by setting display: flex;. Its direct children become flex items.
CSS Example
.container {
display: flex;
background: lightgray;
padding: 10px;
}
.item {
background: skyblue;
margin: 5px;
padding: 10px;
}2. Flex-direction
Defines the direction of items inside the flex container:
row(default)row-reversecolumncolumn-reverse
CSS Example
.row { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; }
.box { background: lightcoral; margin: 5px; padding: 10px; }3. Justify-content
Aligns items along the main axis:
flex-start,flex-endcenterspace-between,space-around,space-evenly
CSS Example
.justify {
display: flex;
justify-content: space-between;
background: lightyellow;
}
.item { background: orange; padding: 10px; margin: 5px; }4. Align-items
Aligns items along the cross axis:
stretch(default)flex-start,flex-endcenterbaseline
CSS Example
.align {
display: flex;
height: 120px;
align-items: center;
background: lightblue;
}
.box { background: purple; color: white; margin: 5px; padding: 10px; }5. Align-content
Works on multi-line flex containers (flex-wrap enabled). Controls spacing between rows.
CSS Example
.multi {
display: flex;
flex-wrap: wrap;
height: 200px;
align-content: space-between;
background: lightgreen;
}
.item { background: darkgreen; color: white; margin: 5px; padding: 10px; }6. Flex-wrap
Defines whether flex items wrap onto multiple lines:nowrap (default), wrap,wrap-reverse.
CSS Example
.wrap {
display: flex;
flex-wrap: wrap;
background: pink;
}
.box { flex: 0 0 100px; background: red; color: white; margin: 5px; padding: 10px; }7. Align-self
Overrides align-items for individual items.
CSS Example
.self-container {
display: flex;
height: 150px;
align-items: center;
background: lightgray;
}
.box { background: teal; color: white; margin: 5px; padding: 10px; }
.special { align-self: flex-end; }8. Order & Flex-grow / Flex-shrink / Flex-basis
Flex items can be controlled individually:
order– changes display orderflex-grow– controls how items expandflex-shrink– controls shrinkingflex-basis– sets initial size
CSS Example
.grow-container {
display: flex;
background: lavender;
}
.item1 { flex: 1; background: red; color: white; margin: 5px; }
.item2 { flex: 2; background: blue; color: white; margin: 5px; order: -1; }