携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

容器属性

有display:flex的属性的元素是容器属性

flex-direction

作用：决定 item 排列方向

flex-direction的值有 row(默认)/row-reverse/column/column-reverse row: 默认情况下，主轴方向水用对其，item沿着主轴从左到右排列 column: 主轴变为竖直方向，item 沿主轴从上至下排列 row-reverse:主轴水平，item 从右至左排列 字面意思row反过来 column-reverse：主轴竖直，item 从下至上排列

flex-wrap

作用：flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。 取值 nowrap(默认)/wrap/wrap/reverse nowrap：默认情况，自动缩小项目的宽度，不换行 wrap：换行，且第一行在上方 wrap-reverse：换行，第一行在下面（与 wrap 相反）

flex-flow

flex-direction和flex-wrap合并写法，取值为 flex-direction值 flex-wrap值； 例如: column wrap ,竖着排列会换行

justify-content

作用：决定 item 在横向主轴上的对齐方式，取值有 flex-start（默认），flex-end，center，space-between，space-around，space-evenly。 flex-start:主轴方向开始对齐 flex-end:主轴方向结束对齐 center:主轴方向居中对齐 space-between:主轴方向两端对齐,两侧无边距，中间间距平均分配 space-around:每个item左右两边间距平均分配，ui效果是左右两侧的间距是中间item间距的一半 space-evenly:左右两侧和item间距都相同，完全平分 注意⚠️，这里的主轴和flex-direction相关，flex-row是，主轴为水平轴，flex-column时，主轴为垂直轴

align-time

作用：决定了item在侧轴（与主轴垂直的轴）方向的对齐方式，取值为：flex-srart/flex-end/center/stretch(默认)/baseline flex-start:侧轴相对item开始对齐 flex-end:侧轴相对item结束对齐 center:侧轴相对item居中对齐 stretch:默认值，item未设置高度时，高度拉伸为容器高度 baseline:文本的基线对齐，受line-height属性影响，会按基线相对容器顶端最远的对齐

align-content

作用：当设置flex-wrap:wrap或者wrap-reverse时，并且item多到足够换行时，多行在交叉轴上的对齐方式 flex-start：侧轴开始对齐

flex-end 侧轴结束对齐

center：垂直居中对齐

space- between：沿轴线两端对齐

space-around：沿轴线均匀分布

stretch：各行将根据其 flex-grow 值伸展以充分占据剩余空间

item属性

display:flex里面的都是item

order

order 的值是整数，默认为 0，整数越小，item 排列越靠前

flex-grow

作用：当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大； 值为整数，表示不同 item 的放大比例。

flex-shrink

作用：当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小， 值为整数，表示不同 item 的缩小比例。

 flex-basis

作用：表示 item 在主轴上占据的空间，默认值为 auto。

 align-self

align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，设置align-self时，优先级大于容器属性的align-item auto：自动 flex-start：item开始对齐 flex-end：item结束对齐 center：item居中对齐 baseline：item 文本基线对齐 stretch：当 item 未设置高度时，item 将和容器等高对齐