Flexbox is one-dimensional: every container chooses a main axis, and the cross axis runs perpendicular to it. With row, the main axis follows the inline direction; with column, it follows the block direction. That single choice changes what justify-content and align-items visibly control, so start by naming the axis rather than memorizing horizontal and vertical shortcuts.
Distribute on the main axis
justify-content places the item group when positive free space remains. flex-start and flex-end pack toward an edge, center splits the space, and the space-* values distribute it between or around items. These values do not set item widths. Grow factors, basis values, intrinsic content and container size are resolved first; justification receives only the free space that remains. Switch between row and column in the preview to see the same rule follow the axis.
Separate items from wrapped lines
align-items positions items within each flex line on the cross axis; one item can override it with align-self. align-content distributes whole flex lines and has no visible work in a single-line nowrap layout. To inspect align-content, choose wrap, provide enough fixed or percentage basis to create multiple lines, and keep cross-axis room in the preview. A gap separates adjacent rows and columns but never adds padding at the container edge.
Verify the owning component
FlexWeave renders the validated visual model with the current browser, but it does not know your content, writing mode, focusable controls or supported viewport range. Paste the generated rules into the owning component, keep the source HTML in a meaningful order, and test narrow widths, zoom, long translations, keyboard navigation and assistive technology. Reverse direction and order never prove a correct reading sequence. Keep accepted CSS and HTML in source control because the capsule deliberately stores no project state.