Flexbox演练场

通过交互式可视化控件掌握flexbox

容器属性

显示

主轴方向

换行

主轴对齐

对齐项目

对齐内容

间距

px

列间距

px

行间距

px

容器宽度

%

最小高度

px

内边距

px

预设

项目

预览

Item 1

Item 2

Item 3

主轴

水平

交叉轴

垂直

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