With ALL WIDTHS set to 300px using a class,
see the results of different settings for DISPLAY:
Resize the window to see how each behaves at different widths:
display: block; (applied to each item)
- Placement: each on new line.
- Widths: each uses specified width.
- Text wrap: text wraps within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: inline; (applied to each item)
- Placement: side by side.
- Widths: ignores specified widths, each adjusts to contents.
- Text wrap: text wraps onto next line if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: inline-block; (applied to each item)
- Placement: side by side (if there's room)
- Widths: each uses specified widths.
- Text wrap: text wraps (upwards) within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: flex; (applied to each item)
- Placement: each on new line.
- Widths: each uses specified widths.
- Text wrap: text wraps within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: inline-flex; (applied to each item)
- Placement: side by side (if there's room).
- Widths: each uses specified widths.
- Text wrap: text wraps (downwards) within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: inline-flex; flex-wrap: wrap; (applied ONLY to parent)
- Placement: side by side (regardless of room).
- Widths: ignores specified widths, each adjusts to contents.
- Text wrap: text wraps (downwards) within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: flex; (applied ONLY to parent)
- Placement: side by side (regardless of room).
- Widths: ignores specified widths, each adjusts to contents.
- Text wrap: text wraps (downwards) within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: flex; flex-wrap: wrap; (applied ONLY to parent)
- Placement: side by side (regardless of room).
- Widths: ignores specified widths, each adjusts to contents.
- Text wrap: text wraps (downwards) within item if needed.
Item
Width set to 200px specifically on this item
3rd Item
display: inline-flex; (applied ONLY to parent)
- Placement: side by side (regardless of room).
- Widths: ignores specified widths, each adjusts to contents.
- Text wrap: text wraps (downwards) within item if needed.
Item
Width set to 200px specifically on this item
3rd Item