CSS Flexbox生成器 - Flex布局可视化构建器 在线
用可视化控件创建CSS Flexbox布局。通过实时预览调整方向、对齐、换行和间距 — 自动生成CSS代码。
常见问题
什么是 CSS Flexbox？
CSS Flexbox（弹性盒子布局）是一个 CSS 布局模块，提供了在容器中高效排列、对齐和分配元素空间的方式。与传统的块级/行内布局不同，flexbox 不依赖方向，在一个维度（行或列）中工作。它在响应式设计、导航栏、卡片布局和元素居中方面表现出色。
如何使用这个 Flexbox 生成器？
使用控制面板设置容器属性：选择 flex-direction、flex-wrap、justify-content、align-items 和 gap 值。使用添加/删除按钮管理子项（默认3个）。点击预览中的子项选择并调整其个别 flex 属性。可以使用预设布局作为起点。使用复制按钮复制生成的 CSS 和 HTML 代码。
我的数据安全吗？会发送到服务器吗？
是的，您的数据完全安全。此工具完全在浏览器中使用客户端 JavaScript 运行。不会将任何布局配置、CSS 代码或任何数据发送到任何服务器。所有代码生成和预览渲染都在您的设备上本地进行。
justify-content 和 align-items 有什么区别？
justify-content 控制元素沿主轴（flex-direction: row 为水平，column 为垂直）的分布方式。align-items 控制元素沿交叉轴的对齐方式。例如，在行布局中，justify-content: center 水平居中，而 align-items: center 垂直居中。
什么时候应该使用 flex-wrap？
当您希望子项流入多行而不是被压缩在一行中时，使用 flex-wrap: wrap。这对于响应式卡片网格、标签列表以及容器宽度不足时子项需要自然换行的布局至关重要。
gap 属性是什么？为什么比 margin 更好？
gap 属性定义 flex 子项之间的间距，而不在容器外边缘添加空间。与 margin 不同，gap 仅在子项之间创建空间，不会导致外边距折叠问题，并且无论 flex-direction 如何都能一致地工作。
flex-grow、flex-shrink 和 flex-basis 如何协同工作？
这三个属性控制子项在容器内的尺寸。flex-basis 设置分配剩余空间前的初始大小（默认: auto）。flex-grow 决定子项占据多少剩余空间（默认: 0）。flex-shrink 决定容器过小时子项缩小多少（默认: 1）。例如，flex: 1 1 0 使子项均等伸缩，占据相同比例的空间。
代码示例
// CSS Flexbox Generator - JavaScript
function generateFlexboxCSS(options = {}) {
const {
display = 'flex',
flexDirection = 'row',
flexWrap = 'nowrap',
justifyContent = 'flex-start',
alignItems = 'stretch',
alignContent = 'stretch',
rowGap = 0,
columnGap = 0,
} = options;
const rules = [`display: ${display}`];
if (flexDirection !== 'row') rules.push(`flex-direction: ${flexDirection}`);
if (flexWrap !== 'nowrap') rules.push(`flex-wrap: ${flexWrap}`);
if (justifyContent !== 'flex-start') rules.push(`justify-content: ${justifyContent}`);
if (alignItems !== 'stretch') rules.push(`align-items: ${alignItems}`);
if (alignContent !== 'stretch' && flexWrap !== 'nowrap') {
rules.push(`align-content: ${alignContent}`);
}
if (rowGap > 0 || columnGap > 0) {
if (rowGap === columnGap) {
rules.push(`gap: ${rowGap}px`);
} else {
rules.push(`gap: ${rowGap}px ${columnGap}px`);
}
}
return rules.map(r => `${r};`).join('\n');
}
function generateFlexItemCSS(options = {}) {
const {
flexGrow = 0,
flexShrink = 1,
flexBasis = 'auto',
order = 0,
alignSelf = 'auto',
} = options;
const rules = [];
if (flexGrow !== 0 || flexShrink !== 1 || flexBasis !== 'auto') {
rules.push(`flex: ${flexGrow} ${flexShrink} ${flexBasis}`);
}
if (order !== 0) rules.push(`order: ${order}`);
if (alignSelf !== 'auto') rules.push(`align-self: ${alignSelf}`);
return rules.map(r => `${r};`).join('\n');
}
// Usage
console.log(generateFlexboxCSS({
justifyContent: 'center',
alignItems: 'center',
rowGap: 16,
columnGap: 16,
}));
// display: flex;
// justify-content: center;
// align-items: center;
// gap: 16px;