CSS Flex布局可视化编辑工具

容器属性
子元素管理
子元素属性
效果预览
1
2
3
点击彩色方块选择子元素进行编辑
CSS代码
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 0px;
}
.flex-item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
属性说明
容器属性
  • flex-direction: 主轴方向
  • flex-wrap: 是否换行
  • justify-content: 主轴对齐
  • align-items: 交叉轴对齐
  • align-content: 多行对齐
  • gap: 子元素间距
子元素属性
  • flex-grow: 放大比例
  • flex-shrink: 缩小比例
  • flex-basis: 基础尺寸
  • align-self: 单独对齐
  • order: 排列顺序

您最近使用了：

收藏 菜单 QQ