Flex布局辅助工具

可视化学习Flex布局,快速生成可用代码

⚙️ 属性控制

5px
请先点击预览区域中的项目进行选择
0
1
0

👁️ 实时预览

项目 1
项目 2
项目 3
项目 4

💻 生成的代码

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
    gap: 5px;
}

.flex-item {
    /* 项目样式 */
}

📋 预设布局