Visualize flex container and items to clearly see how child elements position within the flex container
Adjust flexbox properties to observe different alignment and distribution effects
Direction of flex items
Cross-axis alignment of items
Main-axis alignment and distribution
Whether items wrap to new lines
Cross-axis alignment of wrapped lines
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretchFlex container with items of different sizes to demonstrate flexbox alignment effects
row - Items flow horizontally (left to right)row-reverse - Items flow horizontally (right to left)column - Items flow vertically (top to bottom)column-reverse - Items flow vertically (bottom to top)nowrap - Items stay on single linewrap - Items wrap to new lines as neededwrap-reverse - Items wrap to new lines in reverse orderflex-start - Align items to start of cross-axiscenter - Center items on cross-axisflex-end - Align items to end of cross-axisstretch - Stretch items to fill cross-axisbaseline - Align items along their baselineflex-start - Pack items to start of main-axiscenter - Center items on main-axisflex-end - Pack items to end of main-axisspace-* - Distribute space between items