A flexbox generator builds the CSS for a flexible box layout by letting you set each flexbox property and see the result before you copy the code. The generator below applies the properties to a live row of boxes and writes out the exact display:flex rule, so you can align and distribute elements without memorizing the syntax.
flex-direction to pick the axis, justify-content to position items along it, align-items to position them across it, and gap to add spacing. The tool below generates the rule for you.What CSS Flexbox Is
Flexbox, short for the flexible box layout, is a CSS layout model for arranging items in one direction at a time. When you set display:flex on a container, its direct children become flex items that line up along a main axis. The flex-direction property decides whether that main axis runs horizontally (a row) or vertically (a column). Running at a right angle to the main axis is the cross axis. Every flexbox property either positions items along the main axis or across the cross axis, so once you know which axis you are working on, the rest follows.
How to Use This Generator
- Choose a
flex-directionto set the main axis as a row or a column. - Pick a
justify-contentvalue to position the items along the main axis. - Pick an
align-itemsvalue to position the items across the cross axis. - Set
flex-wrapto nowrap to keep items on one line, or wrap to let them flow onto the next. - Drag the gap slider to add even spacing between the items.
- Copy the generated CSS from the box and paste it onto your container selector.
The Key Flex Properties
| Property | What it controls |
|---|---|
flex-direction | Sets the main axis as a row or a column, and whether items run in normal or reversed order. |
justify-content | Positions and distributes items along the main axis, including the space between or around them. |
align-items | Positions items across the cross axis, or stretches them to fill the container height. |
flex-wrap | Decides whether items stay on a single line or wrap onto new lines when they run out of room. |
gap | Adds consistent spacing between items without using margins. |
flex-direction. The cross axis is perpendicular to it. When the direction is a row, the main axis is horizontal and the cross axis is vertical. When the direction is a column, they swap. This is why the same property can move items left to right in one layout and top to bottom in another.justify-content vs align-items
These two properties are the ones people confuse most, because both position items, but on different axes. The justify-content property works along the main axis: in a row it spreads items left to right, and values like space-between and space-around control how the leftover space is shared. The align-items property works along the cross axis: in a row it moves items up and down within the container, and the stretch value makes them fill the full height. Remember the pair as justify for the main axis and align for the cross axis, and they stop being interchangeable in your head.
When to Use Flexbox vs Grid
Flexbox is built for one dimension, a single row or a single column, where you want items to share space and align along that line. It suits navigation bars, button groups, card footers, and any layout that flows in one direction. CSS Grid is built for two dimensions at once, rows and columns together, where you place items into a defined matrix. Use flexbox when content drives the layout along one axis, and use grid when you need precise control over both axes at the same time. The two work well together: a grid for the page structure, flexbox for the contents of each cell. To build a two-dimensional layout, switch to the CSS grid generator.
Last Thoughts on Generating Flexbox
Flexbox replaced a long list of float and clearfix tricks with a small set of properties that read like plain instructions: pick an axis, position along it, position across it, and set the spacing. Once you see how the main axis and cross axis pair with justify-content and align-items, you can build most one-dimensional layouts from memory.
Generate the rule for your next container above, then explore the rest of our free online tools, including the CSS grid generator for two-dimensional layouts, the box shadow generator, and the CSS gradient generator.
Key Takeaways:
- Flexbox is a one-dimensional layout model: set
display:flexand the children align along a single axis. flex-directionsets the main axis as a row or column; the cross axis is always perpendicular to it.justify-contentpositions items along the main axis;align-itemspositions them across the cross axis.- Use
gapfor even spacing between items instead of margins. - Set
flex-wrapto wrap when items should flow onto new lines on smaller screens. - Reach for flexbox in one direction and CSS Grid when you need rows and columns together.
Frequently Asked Questions (FAQs)
What is the difference between the main axis and the cross axis?
The main axis is the direction your flex items flow, set by flex-direction. The cross axis runs perpendicular to it. In a row layout the main axis is horizontal and the cross axis is vertical, and in a column layout they swap. Knowing which axis is which tells you whether to reach for justify-content or align-items.
When should I use justify-content versus align-items?
Use justify-content to position items along the main axis, including how leftover space is shared with values like space-between. Use align-items to position items across the cross axis, or to stretch them to fill the container. Justify works along the direction items flow; align works across it.
How do I center an element with flexbox?
Set display:flex on the container, then set both justify-content:center and align-items:center. This centers the items along the main axis and across the cross axis at the same time, which centers them in both directions inside the container.
What does flex-wrap do?
The flex-wrap property decides whether items stay on a single line or move onto new lines when they run out of room. The default nowrap keeps everything on one line and may shrink items to fit, while wrap lets them flow onto additional lines, which is useful for responsive layouts.
Should I use flexbox or CSS Grid?
Use flexbox for one-dimensional layouts, a single row or column where items align along one axis, such as a navigation bar. Use CSS Grid for two-dimensional layouts that need rows and columns at once. They also combine well, with a grid for page structure and flexbox inside each area.
Is the gap property supported in flexbox?
Yes. The gap property adds consistent spacing between flex items and is supported in all current browsers. It is cleaner than adding margins to each item, because it spaces items apart without adding extra space on the outer edges of the container.
