基础使用 ​

在类上加上 tn-flex 类即可开启 flex 布局，子元素默认为水平排列，不换行

排列方向 ​

水平排列(默认) ​

tn-flex-row

水平反向排列 ​

tn-flex-row-reverse

水平排列 ​

tn-flex-column

水平反向排列 ​

tn-flex-column-reverse

换行 ​

超过后不换行(默认) ​

tn-flex-nowrap

超过后换行 ​

tn-flex-wrap

超过后反向换行 ​

tn-flex-wrap-reverse

对齐方式 ​

图鸟内置了两种方式的对其方式，分别是单个设置和同时设置两个方向

单个设置 ​

在开启了 flex 布局的前提下，可以单独设置子元素的对齐方式

主轴方向上的对齐方式 ​

主轴方向可以是水平方向（如果 flex-direction 设置为 row 或 row-reverse）或者垂直方向（如果 flex-direction 设置为 column 或 column-reverse）

通过 justify- 来设置主轴方向上的对齐方式

• justify-start：弹性项目在容器的起始位置对齐
• justify-end：弹性项目在容器的结束位置对齐
• justify-center：弹性项目在容器的中心位置对齐
• justify-between：弹性项目平均分布在容器中，两端不留空白
• justify-around：弹性项目平均分布在容器中，两端留有相等的空白
• justify-evenly：弹性项目平均分布在容器中，每个项目周围留有相等的空白

justify-start

justify-end

justify-center

justify-between

justify-around

justify-evenly

​

交叉轴方向上的对齐方式 ​

交叉轴方向可以是水平方向（如果 flex-direction 设置为 column 或 column-reverse）或者垂直方向（如果 flex-direction 设置为 row 或 row-reverse）

通过 items- 来设置交叉轴方向上的对齐方式

• items-start：弹性项目在容器的起始位置对齐
• items-end：弹性项目在容器的结束位置对齐
• items-center：弹性项目在容器的中心位置对齐
• items-baseline：弹性项目在容器的基线位置对齐
• items-stretch：弹性项目在容器的高度上拉伸

items-start

items-end

items-center

items-baseline

items-stretch

​

同时设置主轴和交叉轴方向上的对齐方式 ​

在tn-flex-后加上【align-items】-【justify-content】即可同时设置主轴和交叉轴方向上的对齐方式

• start-start：弹性项目在容器交叉轴的起始位置和主轴的起始位置对齐
• start-end：弹性项目在容器交叉轴的起始位置和主轴的结束位置对齐
• start-center：弹性项目在容器交叉轴的起始位置和主轴的中心位置对齐
• start-between：弹性项目在容器交叉轴的起始位置和主轴的两端对齐
• start-around：弹性项目在容器交叉轴的起始位置和主轴的两端对齐，两端留有相等的空白
• end-start：弹性项目在容器交叉轴的结束位置和主轴的起始位置对齐
• end-end：弹性项目在容器交叉轴的结束位置和主轴的结束位置对齐
• end-center：弹性项目在容器交叉轴的结束位置和主轴的中心位置对齐
• end-between：弹性项目在容器交叉轴的结束位置和主轴的两端对齐
• end-around：弹性项目在容器交叉轴的结束位置和主轴的两端对齐，两端留有相等的空白
• center-start：弹性项目在容器交叉轴的中心位置和主轴的起始位置对齐
• center-end：弹性项目在容器交叉轴的中心位置和主轴的结束位置对齐
• center-center：弹性项目在容器交叉轴的中心位置和主轴的中心位置对齐
• center-between：弹性项目在容器交叉轴的中心位置和主轴的两端对齐
• center-around：弹性项目在容器交叉轴的中心位置和主轴的两端对齐，两端留有相等的空白
• baseline-start：弹性项目在容器交叉轴的基线位置和主轴的起始位置对齐
• baseline-end：弹性项目在容器交叉轴的基线位置和主轴的结束位置对齐
• baseline-center：弹性项目在容器交叉轴的基线位置和主轴的中心位置对齐
• baseline-between：弹性项目在容器交叉轴的基线位置和主轴的两端对齐
• baseline-around：弹性项目在容器交叉轴的基线位置和主轴的两端对齐，两端留有相等的空白
• stretch-start：弹性项目在容器交叉轴的高度上拉伸和主轴的起始位置对齐
• stretch-end：弹性项目在容器交叉轴的高度上拉伸和主轴的结束位置对齐
• stretch-center：弹性项目在容器交叉轴的高度上拉伸和主轴的中心位置对齐
• stretch-between：弹性项目在容器交叉轴的高度上拉伸和主轴的两端对齐
• stretch-around：弹性项目在容器交叉轴的高度上拉伸和主轴的两端对齐，两端留有相等的空白
• center：弹性项目在容器交叉轴的中心位置和主轴的中心位置对齐

tn-flex-start-start

tn-flex-start-end

tn-flex-start-center

tn-flex-start-between

tn-flex-start-around

tn-flex-end-start

tn-flex-end-end

tn-flex-end-center

tn-flex-end-between

tn-flex-end-around

tn-flex-center-start

tn-flex-center-end

tn-flex-center-center

tn-flex-center-between

tn-flex-center-around

tn-flex-baseline-start

tn-flex-baseline-end

tn-flex-baseline-center

tn-flex-baseline-between

tn-flex-baseline-around

tn-flex-stretch-start

tn-flex-stretch-end

tn-flex-stretch-center

tn-flex-stretch-between

tn-flex-stretch-around

tn-flex-center

​

其他属性 ​

tn-flex-1 ​

• flex-grow：定义项目的放大比例，默认值为 0，表示不放大。
• flex-shrink：定义项目的缩小比例，默认值为 1，表示可以缩小。
• flex-basis：定义项目在主轴方向上的基准尺寸，默认值为 auto，表示根据项目的实际尺寸来计算。如果将其设置为 0% 或 0px，则表示将项目的基准尺寸设置为 0。

因此，flex: 1 1 0% 表示弹性项目可以放大，可以缩小，并且其基准尺寸为 0，即它的宽度或高度将由 justify-content 和 align-items 属性的设置来决定。

这种设置常用于实现等宽或等高的弹性项目布局，其中项目的尺寸由容器的大小和其他布局属性来决定。

tn-flex-auto ​

• flex-grow：定义项目的放大比例，默认值为 0，表示不放大。
• flex-shrink：定义项目的缩小比例，默认值为 1，表示可以缩小。
• flex-basis：定义项目在主轴方向上的基准尺寸，默认值为 auto，表示根据项目的实际尺寸来计算。

因此，flex: 1 1 auto 表示弹性项目可以放大，可以缩小，并且其基准尺寸将根据实际内容来计算。

这种设置常用于实现弹性布局，其中弹性项目的尺寸可以自适应内容，并且可以根据容器大小进行伸缩。例如，当容器的宽度缩小时，项目的宽度也会自动缩小，以适应容器的大小。

需要注意的是，当 flex-basis 设置为 auto 时，如果项目内部没有内容，那么项目将会收缩为 0，导致布局异常。因此，建议将 flex-basis 设置为实际内容所需的最小值，以避免出现这种情况。

tn-flex-inital ​

• flex-grow：定义项目的放大比例，默认值为 0，表示不放大。
• flex-shrink：定义项目的缩小比例，默认值为 1，表示可以缩小。
• flex-basis：定义项目在主轴方向上的基准尺寸，默认值为 auto，表示根据项目的实际尺寸来计算。

因此，flex: 0 1 auto 表示弹性项目不可以放大，但可以缩小，其基准尺寸将根据实际内容来计算。

这种设置常用于实现弹性布局，其中弹性项目的尺寸可以自适应内容，并且可以根据容器大小进行缩小。例如，当容器的宽度缩小时，项目的宽度也会自动缩小，以适应容器的大小，但不会放大。

需要注意的是，当弹性项目的内容超出其容器的大小时，flex-shrink 属性控制弹性项目的缩小比例，如果该值为 0，则表示弹性项目不能缩小，可能会导致布局异常。因此，在设计布局时需要谨慎考虑弹性项目的内容和容器的大小，并根据需要适当调整 flex-shrink 属性的值。

tn-flex-none ​

禁用弹性项目的放大和缩小功能，即弹性项目的尺寸将根据其基准尺寸来计算，不会随容器的大小而变化。

tn-flex-grow ​

弹性项目将根据容器的大小自动增长，以填充剩余的空间。

如果多个弹性项目都设置了它们将以相等的比例增长，直到填满容器中的所有可用空间

tn-flex-grow-0 ​

弹性项目将不会随着容器的大小而增长，即使容器中有多余的空间也不会填充。如果弹性项目的实际尺寸大于容器的大小，则会发生溢出，从而导致布局异常

tn-flex-shrink ​

弹性项目可以在容器空间不足时等比例缩小，以适应容器的大小。如果容器空间足够，弹性项目将不会缩小。

如果多个弹性项目都设置了它们将以相等的比例缩小，直到填满容器中的所有可用空间。

tn-flex-shrink-0 ​

弹性项目将不会随着容器的大小而缩小，即使容器中的空间不足也不会缩小。如果弹性项目的实际尺寸小于容器的大小，则会发生溢出，从而导致布局异常。