返回工具列表
flex布局调试工具
在线调试flex布局，CSS学习必备利器，方便初学flex布局快速入门
排列方向
主轴对齐
交叉轴对齐
间距
子元素属性
选择子元素，设置 order、flex-grow、flex-shrink、flex-basis、align-self；flex 简写非空时优先于 grow/shrink/basis。
预览
子元素一
子元素二
子元素三
子元素四
子元素五
子元素六
生成的 CSS
属性说明
order：子项排序，数值越小越靠前（默认 0）。
flex-grow：放大比例，分配剩余空间（默认 0）。
flex-shrink：空间不足时的缩小比例（默认 1）。
flex-basis：初始主轴尺寸，可写 auto、px、% 等。
flex：为 grow、shrink、basis 的简写；与 MDN flex 一致。
align-self：单个子项在交叉轴上的对齐，可覆盖容器的 align-items；auto 表示继承容器设置。