Flexbox 实验室

可视化调整 Flex 布局参数并即时预览

.flex-container

CSS Boilerplate

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 16px;

容器属性 (Container)

主轴方向 (Flex Direction)

主轴对齐 (Justify Content)

交叉轴对齐 (Align Items)

间距 (Gap: 16px)

子项数量 (3)

常用场景

垂直居中？

设置 justify-content: center 和 align-items: center 即可轻松实现。