Flex 布局常用属性详解：从 display 到 flex 简写

在 Flex 布局中，常用的属性有：

'display'：设置元素的布局方式，常用的取值有 'flex'、'inline-flex' 等。
'flex-direction'：设置主轴的方向，常用的取值有 'row'、'row-reverse'、'column'、'column-reverse' 等。
'flex-wrap'：设置元素是否换行，常用的取值有 'nowrap'、'wrap'、'wrap-reverse' 等。
'justify-content'：设置主轴上元素的对齐方式，常用的取值有 'flex-start'、'flex-end'、'center'、'space-between'、'space-around' 等。
'align-items'：设置交叉轴上元素的对齐方式，常用的取值有 'flex-start'、'flex-end'、'center'、'baseline'、'stretch' 等。
'align-content'：设置多行元素在交叉轴上的对齐方式，常用的取值有 'flex-start'、'flex-end'、'center'、'space-between'、'space-around'、'stretch' 等。
'order'：设置元素的显示顺序，值越小越靠前。
'flex-grow'：设置元素的放大比例，决定在剩余空间中如何分配。
'flex-shrink'：设置元素的缩小比例，决定在空间不足时如何收缩。
'flex-basis'：设置元素在主轴上的初始尺寸。
'align-self'：设置单个元素在交叉轴上的对齐方式，覆盖 'align-items' 属性。
'flex'：简写属性，包括 'flex-grow'、'flex-shrink' 和 'flex-basis' 三个属性的缩写形式。

以上是一些常用的 Flex 属性，可以根据实际需求选择使用。