CSS Flexbox Generator

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model that lets you arrange elements in a row or column, distributing space between them and aligning them efficiently even when their sizes are unknown or dynamic. It is activated by setting display: flex or display: inline-flex on a container element, which immediately makes all of its direct children into flex items. Unlike older layout methods that relied on floats or tables, Flexbox was designed specifically for interface layout and handles alignment, ordering, and spacing in a far more predictable way.

justify-content controls how flex items are distributed along the main axis - the primary direction of the flex container. If flex-direction is row (the default), this means horizontal alignment. If flex-direction is column, it means vertical. align-items controls how flex items are aligned along the cross axis - perpendicular to the main axis. For a row-direction container, this means vertical alignment. A simple way to remember it: justify-content aligns along the direction items flow; align-items aligns them in the opposite direction.

These three properties control how a flex item sizes itself relative to the available space in the container. flex-basis sets the starting size of the item before any growing or shrinking takes place - think of it as the item's ideal or default size. flex-grow determines how much the item will expand to fill extra space, relative to other flex items. A value of 2 means the item will take twice as much extra space as items with a value of 1. flex-shrink determines how much the item will contract when there is not enough space. A higher value means the item shrinks faster than others. All three can be set together using the shorthand flex property, for example flex: 1 1 auto.

align-items aligns flex items within a single row (or column) along the cross axis. It works even when there is only one line of flex items. align-content only has an effect when the flex container has multiple lines of items - that is, when flex-wrap is set to wrap or wrap-reverse and items have wrapped onto more than one row. It controls the spacing and alignment of those rows as a group within the container. If all your flex items fit on a single line, align-content will have no visible effect.

flex-direction sets the main axis of the flex container - the direction in which flex items are placed. row (the default) places items horizontally left to right. row-reverse places them horizontally right to left. column stacks items vertically top to bottom. column-reverse stacks them vertically bottom to top. Changing flex-direction also swaps which axis justify-content and align-items apply to, since those properties are always relative to the main and cross axes rather than fixed to horizontal or vertical.

By default, flex items all try to fit onto a single line, shrinking if necessary. flex-wrap: wrap allows items to flow onto multiple lines when they would otherwise overflow the container. wrap-reverse does the same but stacks the new lines above (for row containers) or to the left (for column containers) rather than below or to the right. You should use flex-wrap: wrap any time you want a responsive layout where items naturally reflow into rows as the container gets narrower - for example, a grid of cards or thumbnails.

Apply display: flex, justify-content: center, and align-items: center to the parent container. This centres the child element along both the main axis and the cross axis simultaneously:

.container { display: flex; justify-content: center; align-items: center; }

This works regardless of the size of the child element and is one of the most reliable centring techniques in CSS. If the container does not have a defined height, make sure to set one - otherwise there is no cross-axis space to centre within.

Both values turn an element into a flex container and give its children flex behaviour. The difference is how the container itself behaves in relation to surrounding content. display: flex makes the container a block-level element - it takes up the full width available and starts on a new line, like a div. display: inline-flex makes the container inline - it only takes up as much width as its content requires and flows alongside other inline elements, like a span. Use inline-flex when you need the flex container to sit within a line of text or beside other inline content.

The order property controls the visual order in which a flex item appears within its container, independent of its position in the HTML source. All flex items default to an order value of 0. Items with a lower value appear first; items with a higher value appear later. Negative values are allowed and will place items before those with the default value of 0. This is useful for changing visual layout at different screen sizes via media queries without altering the HTML, though keep in mind it only affects visual order - screen readers and keyboard navigation still follow the source order.

align-items is set on the flex container and applies the same cross-axis alignment to all flex items inside it. align-self is set on an individual flex item and overrides the container's align-items value for that specific item only. For example, if the container has align-items: center, you can give one particular item align-self: flex-end to push it to the end of the cross axis while all other items remain centred.

Flexbox is a one-dimensional layout system - it is best suited for arranging items in a single row or a single column, with control over how they grow, shrink, and align along that axis. It excels at things like navigation bars, button groups, centring content, and distributing items along one direction. CSS Grid is a two-dimensional layout system - it lets you place items across both rows and columns simultaneously. It is better suited for overall page layouts, card grids, and any design where you need precise control over placement in both directions at once. In practice, the two complement each other well. A common pattern is to use Grid for the overall page structure and Flexbox for the components within it.

By default, flex-wrap is set to nowrap, which forces all items onto a single line regardless of their size. To allow items to wrap onto multiple lines, add flex-wrap: wrap to the flex container. If items are still not wrapping after setting this, check whether a flex-shrink value is causing items to compress rather than wrap, or whether the items have an explicit width that is smaller than you expect.