CSS Flexbox Generator는 컨테이너와 아이템 속성을 실시간으로 조정하여 플렉스 레이아웃을 시각적으로 구축하고, 프로덕션용 CSS를 복사할 수 있습니다. 이 가이드에서는 모든 Flexbox 속성, 일반 레이아웃 패턴, Flexbox vs Grid 결정 규칙, 반응형 기법, 접근성 모범 사례를 다룹니다.
- Flexbox is a one-dimensional layout model that distributes space along a single main axis (row or column), controlled via the flex container.
- Six container properties (display, flex-direction, justify-content, align-items, flex-wrap, gap) define how child items flow, align, and space themselves.
- Five item properties (flex-grow, flex-shrink, flex-basis, order, align-self) let individual children override container-level behavior.
- Common patterns like navbars, card grids, holy grail layouts, and sidebars each require just a handful of flexbox declarations.
- Choose Flexbox for one-dimensional flow; choose CSS Grid for two-dimensional placement. Both can be combined on the same page.
- Semantic HTML plus ARIA attributes ensures screen readers interpret flex-reordered content correctly.
Why Use a CSS Flexbox Generator?
CSS Flexbox is one of the most important layout systems in modern front-end development, yet the interplay between container properties, item properties, and axis behavior can be hard to visualize in your head. A CSS Flexbox Generator gives you a live visual canvas: tweak a property, see the result immediately, then copy the exact CSS into your project.
Whether you are prototyping a navigation bar, building a card grid, or constructing a full-page layout, a visual flexbox builder saves time and reduces trial-and-error. Below we cover every flexbox concept you need, starting from the two axes and ending with production-ready responsive patterns.
Understanding the Two Axes
Every flex container has two axes. The main axis runs in the direction set by flex-direction (default: row, meaning left to right). The cross axis runs perpendicular to it. All justify-* properties work along the main axis; all align-* properties work along the cross axis.
If you change flex-direction to column, the main axis becomes vertical and the cross axis becomes horizontal. This axis-swap is the source of many beginner mistakes, so keep it in mind whenever you switch directions.
/* Main axis = horizontal (default) */
.container {
display: flex;
flex-direction: row; /* Main axis: left -> right */
}
/* Main axis = vertical */
.container-column {
display: flex;
flex-direction: column; /* Main axis: top -> bottom */
}Flex Container Properties
A flex container is any element with display: flex (or inline-flex). The six properties below control how its children (flex items) are arranged.
display: flex | inline-flex
display: flex creates a block-level flex container that takes up the full width of its parent. display: inline-flex creates an inline-level flex container that only takes the width needed by its children. In most layouts you want flex.
.flex-block { display: flex; } /* Block-level flex container */
.flex-inline { display: inline-flex; } /* Inline-level flex container */flex-direction
Sets the main axis direction. Accepts four values: row (default, left-to-right), row-reverse (right-to-left), column (top-to-bottom), column-reverse (bottom-to-top). Row is by far the most common.
.row { flex-direction: row; } /* Default: left to right */
.row-rev { flex-direction: row-reverse; } /* Right to left */
.col { flex-direction: column; } /* Top to bottom */
.col-rev { flex-direction: column-reverse; } /* Bottom to top */justify-content
Distributes items along the main axis. Common values: flex-start (pack items at start), flex-end (pack at end), center (center items), space-between (equal space between items, no space at edges), space-around (equal space around each item), space-evenly (equal space between and at edges).
.container {
display: flex;
justify-content: flex-start; /* Pack items at the start */
justify-content: flex-end; /* Pack items at the end */
justify-content: center; /* Center items */
justify-content: space-between; /* Equal space between, no edges */
justify-content: space-around; /* Equal space around each item */
justify-content: space-evenly; /* Equal space everywhere */
}align-items
Aligns items along the cross axis. Common values: stretch (default, items fill the cross axis), flex-start, flex-end, center, baseline (align by text baseline). This is what you use to vertically center items in a row layout.
.container {
display: flex;
align-items: stretch; /* Default: fill cross axis */
align-items: flex-start; /* Pack at cross-axis start */
align-items: flex-end; /* Pack at cross-axis end */
align-items: center; /* Center on cross axis */
align-items: baseline; /* Align by text baseline */
}flex-wrap
Controls whether items can wrap to new lines. nowrap (default) forces all items on one line. wrap allows wrapping. wrap-reverse wraps in the reverse cross-axis direction. For responsive card grids, you almost always want wrap.
.container {
display: flex;
flex-wrap: nowrap; /* Default: single line */
flex-wrap: wrap; /* Allow wrapping */
flex-wrap: wrap-reverse; /* Wrap in reverse direction */
}gap (row-gap, column-gap)
Adds space between items without affecting the outer edges. gap: 16px sets both row and column gap. You can also use row-gap and column-gap independently. This is the recommended modern approach, replacing the old margin-based spacing hacks.
.container {
display: flex;
gap: 16px; /* Both row and column gap */
row-gap: 20px; /* Only between rows */
column-gap: 12px; /* Only between columns */
}Flex Item Properties
These properties are set on individual flex items (direct children of the container) to override the container-level behavior.
flex-grow
Defines how much an item should grow when extra space is available. Default is 0 (do not grow). If one item has flex-grow: 2 and another has flex-grow: 1, the first gets twice as much extra space.
.item-a { flex-grow: 0; } /* Default: do not grow */
.item-b { flex-grow: 1; } /* Take 1 share of extra space */
.item-c { flex-grow: 2; } /* Take 2 shares of extra space */flex-shrink
Defines how much an item should shrink when space is insufficient. Default is 1. Set to 0 to prevent an item from shrinking. Useful for fixed-width sidebars.
.sidebar { flex-shrink: 0; } /* Never shrink (fixed width) */
.content { flex-shrink: 1; } /* Default: allow shrinking */flex-basis
Sets the initial main size of an item before flex-grow and flex-shrink distribute remaining space. Accepts any length (200px, 30%) or auto (use the item content or width/height). Think of it as the starting point before the flex algorithm kicks in.
.item { flex-basis: auto; } /* Use content/width as basis */
.item { flex-basis: 200px; } /* Start at 200px, then grow/shrink */
.item { flex-basis: 30%; } /* Start at 30% of container */
.item { flex-basis: 0%; } /* Start at zero, grow equally */The flex Shorthand
The flex shorthand combines grow, shrink, and basis: flex: 1 is shorthand for flex: 1 1 0% (grow equally from a zero base). flex: 0 0 auto means the item is inflexible. Using the shorthand is recommended because it sets intelligent defaults.
/* Recommended shorthand values */
.item { flex: 1; } /* flex: 1 1 0% -> grow equally */
.item { flex: auto; } /* flex: 1 1 auto -> grow from content size */
.item { flex: none; } /* flex: 0 0 auto -> inflexible */
.item { flex: 0 0 200px; } /* Fixed at 200px, no grow/shrink */order
Controls the visual order of items. All items default to order: 0. Items with lower values appear first. This is purely visual and does not change the DOM order, which is what assistive technologies read.
.item-first { order: -1; } /* Moves to the start */
.item-normal { order: 0; } /* Default position */
.item-last { order: 1; } /* Moves to the end */align-self
Overrides the container align-items value for a single item. For example, you can center most items but stick one to the top by setting align-self: flex-start on it.
.container { align-items: center; }
.special-item { align-self: flex-start; } /* Override: stick to top */
.stretched { align-self: stretch; } /* Override: fill height */Common Flexbox Layout Patterns
Here are the patterns you will use most frequently. Each one is copy-paste ready.
Navigation Bar
A responsive navbar with the logo on the left and links on the right is the most classic flexbox pattern. Use justify-content: space-between on the container and align-items: center for vertical centering.
/* Responsive Navigation Bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
background: #1a1a2e;
}
.navbar .logo { font-size: 20px; font-weight: 700; }
.navbar .links {
display: flex;
gap: 24px;
list-style: none;
}Card Grid
Combine flex-wrap: wrap with a fixed flex-basis to create a responsive card grid. Each card uses flex: 0 0 calc(33.333% - 16px) for a 3-column layout with gap. On smaller screens, change the basis to calc(50% - 16px) or 100%.
/* Responsive Card Grid */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 0 0 calc(33.333% - 16px); /* 3 columns */
border-radius: 8px;
padding: 20px;
}
/* Tablet: 2 columns */
@media (max-width: 768px) {
.card { flex: 0 0 calc(50% - 16px); }
}
/* Mobile: 1 column */
@media (max-width: 480px) {
.card { flex: 0 0 100%; }
}Holy Grail Layout
The classic three-column layout (left sidebar, main content, right sidebar) with a header and footer. The outer container uses flex-direction: column and min-height: 100vh. The middle row uses a nested flex container with flex-direction: row. The main content area gets flex: 1 to fill remaining space.
/* Holy Grail Layout */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header, .footer {
flex: 0 0 auto; /* Fixed height */
}
.middle {
display: flex;
flex: 1; /* Fill remaining vertical space */
}
.left-sidebar { flex: 0 0 200px; }
.main-content { flex: 1; }
.right-sidebar { flex: 0 0 200px; }
@media (max-width: 768px) {
.middle { flex-direction: column; }
.left-sidebar, .right-sidebar { flex: 0 0 auto; }
}Sidebar Layout
A two-column layout with a fixed-width sidebar and a flexible main area. The sidebar uses flex: 0 0 280px (fixed at 280px, no grow or shrink) while the main content uses flex: 1 to fill the rest.
/* Sidebar Layout */
.layout {
display: flex;
gap: 24px;
}
.sidebar {
flex: 0 0 280px; /* Fixed width, no grow or shrink */
}
.main {
flex: 1; /* Fill remaining space */
min-width: 0; /* Allow shrinking below content size */
}Perfect Centering
The simplest pattern: set display: flex; justify-content: center; align-items: center on the container. This centers the child both horizontally and vertically. Add min-height: 100vh for full-page centering.
/* Perfect Centering */
.center-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Sticky Footer
Wrap your page in a flex container with flex-direction: column and min-height: 100vh. Give the main content flex: 1. The footer will always stick to the bottom, even when content is short.
/* Sticky Footer */
.page-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page-content { flex: 1; } /* Pushes footer to bottom */
.page-footer { flex-shrink: 0; }Flexbox vs CSS Grid: Decision Guide
Flexbox and CSS Grid are complementary, not competing. Here is a practical decision framework.
- You need one-dimensional flow (a single row or column)
- Content size should drive the layout (items determine their own width)
- You need dynamic wrapping with content-aware sizing
- You are building component internals (buttons in a toolbar, items in a nav)
- You need two-dimensional placement (rows AND columns simultaneously)
- The layout should drive content placement (fixed tracks and areas)
- You want named grid areas for complex page layouts
- You need precise alignment control on both axes at once
In practice, most production sites combine both: Grid for page-level layout and Flexbox for component-level alignment.
/* Combining Grid + Flexbox */
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
}
/* Flexbox inside grid areas */
.header {
grid-area: header;
display: flex; /* Flex for component internals */
justify-content: space-between;
align-items: center;
}Responsive Flexbox Patterns
Flexbox shines in responsive design because items naturally adapt to available space.
Direction Switching
Use flex-direction: row on desktop and flex-direction: column on mobile via media queries. This is the simplest responsive pattern.
/* Direction Switching */
.container {
display: flex;
flex-direction: row;
gap: 16px;
}
@media (max-width: 640px) {
.container { flex-direction: column; }
}Wrapping with flex-basis
Set a minimum flex-basis (e.g., flex: 1 1 300px). Items stay in a row when the container is wide, then wrap to multiple rows when each item cannot maintain 300px. No media queries needed.
/* Auto-wrapping with flex-basis (no media queries needed) */
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.item {
flex: 1 1 300px; /* Grow, shrink, min 300px */
}Order Reordering
Use the order property in media queries to reorder items on different screen sizes. For instance, move a sidebar below the main content on mobile by giving it order: 2.
/* Order Reordering on Mobile */
.sidebar { order: 0; }
.content { order: 0; }
@media (max-width: 768px) {
.sidebar { order: 2; } /* Move sidebar below content */
.content { order: 1; }
}Accessibility Considerations
Flexbox visual reordering can create accessibility issues if not handled carefully.
- DOM order matters. Screen readers and keyboard navigation follow the DOM order, not the visual order. Keep the DOM order logical and use CSS order only for minor visual tweaks.
- Use semantic HTML. A flex container should still use proper elements:
<nav>for navigation,<main>for main content,<aside>for sidebars,<ul>for lists. - Test with keyboard. Tab through your layout to ensure the focus order matches the reading order. If flex order causes focus to jump around, restructure the DOM instead.
- ARIA landmarks. Use
roleattributes when semantic elements are not enough. For example,role="navigation"ensures assistive technologies understand a flex container is a nav area. - Avoid relying on visual-only cues. If you use flex ordering to visually group related items, ensure the relationship is also communicated in the HTML structure.
<!-- Semantic HTML with Flexbox -->
<nav style="display: flex; justify-content: space-between; align-items: center;">
<a href="/" aria-label="Home">Logo</a>
<ul role="list" style="display: flex; gap: 16px; list-style: none;">
<li><a href="/about">About</a></li>
<li><a href="/tools">Tools</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<main style="display: flex; gap: 24px;">
<article style="flex: 1;">Main Content</article>
<aside style="flex: 0 0 280px;" aria-label="Sidebar">Sidebar</aside>
</main>Performance and Debugging Tips
- Use the browser DevTools flexbox overlay. Chrome, Firefox, and Edge all have built-in flex container highlights that show you main axis, cross axis, and item boundaries in real time.
- Set min-width: 0 on items that overflow. Flex items have min-width: auto by default, which prevents them from shrinking below their content size. This often causes unexpected horizontal scrollbars.
- Prefer gap over margin. The gap property only creates space between items, not on the outer edges. This eliminates the negative-margin hacks that were once common in flexbox layouts.
- Use flex shorthand. Writing
flex: 1instead of separate flex-grow, flex-shrink, flex-basis declarations is more readable and sets better defaults.
Frequently Asked Questions
What is a CSS Flexbox Generator and how does it work?
A CSS Flexbox Generator is a visual tool that lets you configure flex container and item properties through an interactive interface. You adjust settings like flex-direction, justify-content, align-items, gap, flex-grow, and flex-shrink, then see the layout update in real time. Once satisfied, you copy the generated CSS code directly into your project. It eliminates guesswork and speeds up prototyping.
What is the difference between justify-content and align-items in Flexbox?
justify-content distributes items along the main axis (horizontal by default with flex-direction: row), while align-items aligns items along the cross axis (vertical by default). If you set flex-direction to column, the axes swap: justify-content controls vertical distribution and align-items controls horizontal alignment.
When should I use Flexbox instead of CSS Grid?
Use Flexbox for one-dimensional layouts where items flow in a single row or column and content determines sizing. Use CSS Grid for two-dimensional layouts where you need control over both rows and columns simultaneously. In practice, most projects use both: Grid for page structure and Flexbox for component internals.
How do I make all flex items equal width?
Set flex: 1 on all items, which is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. This makes items grow equally from a zero base. If items still differ in width, also set min-width: 0 to allow them to shrink below their content size.
Why is my flex item not shrinking below its content size?
Flex items have min-width: auto by default, which prevents them from becoming narrower than their minimum content width. To fix this, add min-width: 0 to the item (or min-height: 0 for column layouts). Also verify that flex-shrink is not set to 0.
Can I use the gap property with Flexbox?
Yes. The gap property is supported in Flexbox across all modern browsers (Chrome 84+, Firefox 63+, Safari 14.1+, Edge 84+). It creates space between items without adding space on the outer edges, making it superior to margin-based approaches. Use gap for both axes, or row-gap and column-gap for independent control.
How do I create a responsive card grid with Flexbox?
Set flex-wrap: wrap on the container and give each card a flex-basis with a minimum size, for example flex: 1 1 300px. Cards will stay in a row when the container is wide enough, then wrap to new rows when they cannot maintain the minimum width. Combine with gap for consistent spacing. For more precise column counts, use calc() in flex-basis.
Does flex order affect screen readers and accessibility?
The CSS order property only changes the visual order, not the DOM order. Screen readers and keyboard navigation follow the DOM order. This means if you reorder items visually with order, keyboard users may experience confusing tab navigation. Keep the DOM in a logical reading order and only use order for minor visual adjustments.
Flexbox로 구축 시작하기
CSS Flexbox는 모든 프론트엔드 개발자가 매일 사용하는 필수 레이아웃 도구입니다.