Flexbox 属性详解 - 全面指南

在Flexbox中常用的属性有：\n\n1. display：设置元素的显示类型为flex。\n2. flex-direction：设置主轴的方向，可以是row（水平方向）、column（垂直方向）、row-reverse（水平方向反向）或column-reverse（垂直方向反向）。\n3. flex-wrap：设置是否换行，可以是nowrap（不换行）、wrap（换行）或wrap-reverse（换行且反向）。\n4. flex-flow：是flex-direction和flex-wrap的简写形式。\n5. justify-content：设置主轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）或space-around（每个项目两侧的间隔相等）。\n6. align-items：设置交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、baseline（基线对齐）或stretch（拉伸对齐）。\n7. align-content：多行情况下，设置交叉轴上的对齐方式，可以是flex-start（起始对齐）、flex-end（末尾对齐）、center（居中对齐）、space-between（两端对齐，行之间间隔相等）、space-around（每行两侧的间隔相等）或stretch（拉伸对齐）。\n8. order：设置项目的排列顺序，数值越小越靠前，默认为0。\n9. flex-grow：设置项目的放大比例，默认为0，即如果存在剩余空间，也不放大。\n10. flex-shrink：设置项目的缩小比例，默认为1，即如果空间不足，项目将缩小。\n11. flex-basis：设置项目在主轴上的初始大小。\n12. flex：是flex-grow、flex-shrink和flex-basis的简写形式。\n13. align-self：设置单个项目在交叉轴上的对齐方式，可以覆盖align-items属性。\n14. margin：设置项目的外边距。\n15. padding：设置项目的内边距。\n16. width：设置项目的宽度。\n17. height：设置项目的高度。\n18. max-width：设置项目的最大宽度。\n19. max-height：设置项目的最大高度。\n20. min-width：设置项目的最小宽度。\n21. min-height：设置项目的最小高度。\n\n这些属性可以通过在父元素上使用flex属性，或者在子元素上使用相关属性来实现弹性布局。