Vuetify 中文网

简体中文

English

简体中文

English

主题

弹性布局（Flex） ​

可以通过纵向对齐，横向对其以及其他的响应式的弹性盒子 (flexbox) 辅助类来控制弹性容器 (flex container) 的布局。

类代表值
d-flexdisplay: flex;
d-inline-flexdisplay: inline-flex;
d-sm-flexdisplay: flex;
d-sm-inline-flexdisplay: inline-flex;
d-md-flexdisplay: flex;
d-md-inline-flexdisplay: inline-flex;
d-lg-flexdisplay: flex;
d-lg-inline-flexdisplay: inline-flex;
d-xl-flexdisplay: flex;
d-xl-inline-flexdisplay: inline-flex;
flex-fillflex: 1 1 auto;
flex-sm-fillflex: 1 1 auto;
flex-md-fillflex: 1 1 auto;
flex-lg-fillflex: 1 1 auto;
flex-xl-fillflex: 1 1 auto;
flex-1-1flex: 1 1 0%;
flex-sm-1-1flex: 1 1 0%;
flex-md-1-1flex: 1 1 0%;
flex-lg-1-1flex: 1 1 0%;
flex-xl-1-1flex: 1 1 0%;
flex-1-0flex: 1 0 0%;
flex-sm-1-0flex: 1 0 0%;
flex-md-1-0flex: 1 0 0%;
flex-lg-1-0flex: 1 0 0%;
flex-xl-1-0flex: 1 0 0%;
flex-0-1flex: 0 1 auto;
flex-sm-0-1flex: 0 1 auto;
flex-md-0-1flex: 0 1 auto;
flex-lg-0-1flex: 0 1 auto;
flex-xl-0-1flex: 0 1 auto;
flex-0-0flex: 0 0 auto;
flex-sm-0-0flex: 0 0 auto;
flex-md-0-0flex: 0 0 auto;
flex-lg-0-0flex: 0 0 auto;
flex-xl-0-0flex: 0 0 auto;
flex-1-1-100flex: 1 1 100%;
flex-sm-1-1-100flex: 1 1 100%;
flex-md-1-1-100flex: 1 1 100%;
flex-lg-1-1-100flex: 1 1 100%;
flex-xl-1-1-100flex: 1 1 100%;
flex-1-0-100flex: 1 0 100%;
flex-sm-1-0-100flex: 1 0 100%;
flex-md-1-0-100flex: 1 0 100%;
flex-lg-1-0-100flex: 1 0 100%;
flex-xl-1-0-100flex: 1 0 100%;
flex-0-1-100flex: 0 1 100%;
flex-sm-0-1-100flex: 0 1 100%;
flex-md-0-1-100flex: 0 1 100%;
flex-lg-0-1-100flex: 0 1 100%;
flex-xl-0-1-100flex: 0 1 100%;
flex-0-0-100flex: 0 0 100%;
flex-sm-0-0-100flex: 0 0 100%;
flex-md-0-0-100flex: 0 0 100%;
flex-lg-0-0-100flex: 0 0 100%;
flex-xl-0-0-100flex: 0 0 100%;
ga-0gap: 0;
ga-1gap: 4px;
ga-2gap: 8px;
ga-3gap: 12px;
ga-4gap: 16px;
ga-5gap: 20px;
ga-6gap: 24px;
ga-7gap: 28px;
ga-8gap: 32px;
ga-9gap: 36px;
ga-10gap: 40px;
ga-11gap: 44px;
ga-12gap: 48px;
ga-13gap: 52px;
ga-14gap: 56px;
ga-15gap: 60px;
ga-16gap: 64px;
ga-sm-0gap: 0;
ga-sm-1gap: 4px;
ga-sm-2gap: 8px;
ga-sm-3gap: 12px;
ga-sm-4gap: 16px;
ga-sm-5gap: 20px;
ga-sm-6gap: 24px;
ga-sm-7gap: 28px;
ga-sm-8gap: 32px;
ga-sm-9gap: 36px;
ga-sm-10gap: 40px;
ga-sm-11gap: 44px;
ga-sm-12gap: 48px;
ga-sm-13gap: 52px;
ga-sm-14gap: 56px;
ga-sm-15gap: 60px;
ga-sm-16gap: 64px;
ga-md-0gap: 0;
ga-md-1gap: 4px;
ga-md-2gap: 8px;
ga-md-3gap: 12px;
ga-md-4gap: 16px;
ga-md-5gap: 20px;
ga-md-6gap: 24px;
ga-md-7gap: 28px;
ga-md-8gap: 32px;
ga-md-9gap: 36px;
ga-md-10gap: 40px;
ga-md-11gap: 44px;
ga-md-12gap: 48px;
ga-md-13gap: 52px;
ga-md-14gap: 56px;
ga-md-15gap: 60px;
ga-md-16gap: 64px;
ga-lg-0gap: 0;
ga-lg-1gap: 4px;
ga-lg-2gap: 8px;
ga-lg-3gap: 12px;
ga-lg-4gap: 16px;
ga-lg-5gap: 20px;
ga-lg-6gap: 24px;
ga-lg-7gap: 28px;
ga-lg-8gap: 32px;
ga-lg-9gap: 36px;
ga-lg-10gap: 40px;
ga-lg-11gap: 44px;
ga-lg-12gap: 48px;
ga-lg-13gap: 52px;
ga-lg-14gap: 56px;
ga-lg-15gap: 60px;
ga-lg-16gap: 64px;
ga-xl-0gap: 0;
ga-xl-1gap: 4px;
ga-xl-2gap: 8px;
ga-xl-3gap: 12px;
ga-xl-4gap: 16px;
ga-xl-5gap: 20px;
ga-xl-6gap: 24px;
ga-xl-7gap: 28px;
ga-xl-8gap: 32px;
ga-xl-9gap: 36px;
ga-xl-10gap: 40px;
ga-xl-11gap: 44px;
ga-xl-12gap: 48px;
ga-xl-13gap: 52px;
ga-xl-14gap: 56px;
ga-xl-15gap: 60px;
ga-xl-16gap: 64px;
flex-rowflex-direction: row;
flex-row-reverseflex-direction: row-reverse;
flex-columnflex-direction: column;
flex-column-reverseflex-direction: column-reverse;
flex-sm-rowflex-direction: row;
flex-sm-row-reverseflex-direction: row-reverse;
flex-sm-columnflex-direction: column;
flex-sm-column-reverseflex-direction: column-reverse;
flex-md-rowflex-direction: row;
flex-md-row-reverseflex-direction: row-reverse;
flex-md-columnflex-direction: column;
flex-md-column-reverseflex-direction: column-reverse;
flex-lg-rowflex-direction: row;
flex-lg-row-reverseflex-direction: row-reverse;
flex-lg-columnflex-direction: column;
flex-lg-column-reverseflex-direction: column-reverse;
flex-xl-rowflex-direction: row;
flex-xl-row-reverseflex-direction: row-reverse;
flex-xl-columnflex-direction: column;
flex-xl-column-reverseflex-direction: column-reverse;
justify-startjustify-content: flex-start;
justify-endjustify-content: flex-end;
justify-centerjustify-content: center;
justify-space-betweenjustify-content: space-between;
justify-space-aroundjustify-content: space-around;
justify-space-evenlyjustify-content: space-evenly;
justify-sm-startjustify-content: flex-start;
justify-sm-endjustify-content: flex-end;
justify-sm-centerjustify-content: center;
justify-sm-space-betweenjustify-content: space-between;
justify-sm-space-aroundjustify-content: space-around;
justify-sm-space-evenlyjustify-content: space-evenly;
justify-md-startjustify-content: flex-start;
justify-md-endjustify-content: flex-end;
justify-md-centerjustify-content: center;
justify-md-space-betweenjustify-content: space-between;
justify-md-space-aroundjustify-content: space-around;
justify-md-space-evenlyjustify-content: space-evenly;
justify-lg-startjustify-content: flex-start;
justify-lg-endjustify-content: flex-end;
justify-lg-centerjustify-content: center;
justify-lg-space-betweenjustify-content: space-between;
justify-lg-space-aroundjustify-content: space-around;
justify-lg-space-evenlyjustify-content: space-evenly;
justify-xl-startjustify-content: flex-start;
justify-xl-endjustify-content: flex-end;
justify-xl-centerjustify-content: center;
justify-xl-space-betweenjustify-content: space-between;
justify-xl-space-aroundjustify-content: space-around;
justify-xl-space-evenlyjustify-content: space-evenly;
align-startalign-items: flex-start;
align-endalign-items: flex-end;
align-centeralign-items: center;
align-baselinealign-items: baseline;
align-stretchalign-items: stretch;
align-sm-startalign-items: flex-start;
align-sm-endalign-items: flex-end;
align-sm-centeralign-items: center;
align-sm-baselinealign-items: baseline;
align-sm-stretchalign-items: stretch;
align-md-startalign-items: flex-start;
align-md-endalign-items: flex-end;
align-md-centeralign-items: center;
align-md-baselinealign-items: baseline;
align-md-stretchalign-items: stretch;
align-lg-startalign-items: flex-start;
align-lg-endalign-items: flex-end;
align-lg-centeralign-items: center;
align-lg-baselinealign-items: baseline;
align-lg-stretchalign-items: stretch;
align-xl-startalign-items: flex-start;
align-xl-endalign-items: flex-end;
align-xl-centeralign-items: center;
align-xl-baselinealign-items: baseline;
align-xl-stretchalign-items: stretch;
align-self-startalign-self: flex-start;
align-self-endalign-self: flex-end;
align-self-centeralign-self: center;
align-self-baselinealign-self: baseline;
align-self-autoalign-self: auto;
align-self-stretchalign-self: stretch;
align-self-sm-startalign-self: flex-start;
align-self-sm-endalign-self: flex-end;
align-self-sm-centeralign-self: center;
align-self-sm-baselinealign-self: baseline;
align-self-sm-autoalign-self: auto;
align-self-sm-stretchalign-self: stretch;
align-self-md-startalign-self: flex-start;
align-self-md-endalign-self: flex-end;
align-self-md-centeralign-self: center;
align-self-md-baselinealign-self: baseline;
align-self-md-autoalign-self: auto;
align-self-md-stretchalign-self: stretch;
align-self-lg-startalign-self: flex-start;
align-self-lg-endalign-self: flex-end;
align-self-lg-centeralign-self: center;
align-self-lg-baselinealign-self: baseline;
align-self-lg-autoalign-self: auto;
align-self-lg-stretchalign-self: stretch;
align-self-xl-startalign-self: flex-start;
align-self-xl-endalign-self: flex-end;
align-self-xl-centeralign-self: center;
align-self-xl-baselinealign-self: baseline;
align-self-xl-autoalign-self: auto;
align-self-xl-stretchalign-self: stretch;
flex-sm-nowrapflex-wrap: nowrap;
flex-sm-wrapflex-wrap: wrap;
flex-sm-wrap-reverseflex-wrap: wrap-reverse;
flex-md-nowrapflex-wrap: nowrap;
flex-md-wrapflex-wrap: wrap;
flex-md-wrap-reverseflex-wrap: wrap-reverse;
flex-lg-nowrapflex-wrap: nowrap;
flex-lg-wrapflex-wrap: wrap;
flex-lg-wrap-reverseflex-wrap: wrap-reverse;
flex-xl-nowrapflex-wrap: nowrap;
flex-xl-wrapflex-wrap: wrap;
flex-xl-wrap-reverseflex-wrap: wrap-reverse;
order-firstorder: -1;
order-0order: 0;
order-1order: 1;
order-2order: 2;
order-3order: 3;
order-4order: 4;
order-5order: 5;
order-6order: 6;
order-7order: 7;
order-8order: 8;
order-9order: 9;
order-10order: 10;
order-11order: 11;
order-12order: 12;
order-lastorder: 13;
order-sm-firstorder: -1;
order-sm-0order: 0;
order-sm-1order: 1;
order-sm-2order: 2;
order-sm-3order: 3;
order-sm-4order: 4;
order-sm-5order: 5;
order-sm-6order: 6;
order-sm-7order: 7;
order-sm-8order: 8;
order-sm-9order: 9;
order-sm-10order: 10;
order-sm-11order: 11;
order-sm-12order: 12;
order-sm-lastorder: 13;
order-md-firstorder: -1;
order-md-0order: 0;
order-md-1order: 1;
order-md-2order: 2;
order-md-3order: 3;
order-md-4order: 4;
order-md-5order: 5;
order-md-6order: 6;
order-md-7order: 7;
order-md-8order: 8;
order-md-9order: 9;
order-md-10order: 10;
order-md-11order: 11;
order-md-12order: 12;
order-md-lastorder: 13;
order-lg-firstorder: -1;
order-lg-0order: 0;
order-lg-1order: 1;
order-lg-2order: 2;
order-lg-3order: 3;
order-lg-4order: 4;
order-lg-5order: 5;
order-lg-6order: 6;
order-lg-7order: 7;
order-lg-8order: 8;
order-lg-9order: 9;
order-lg-10order: 10;
order-lg-11order: 11;
order-lg-12order: 12;
order-lg-lastorder: 13;
order-xl-firstorder: -1;
order-xl-0order: 0;
order-xl-1order: 1;
order-xl-2order: 2;
order-xl-3order: 3;
order-xl-4order: 4;
order-xl-5order: 5;
order-xl-6order: 6;
order-xl-7order: 7;
order-xl-8order: 8;
order-xl-9order: 9;
order-xl-10order: 10;
order-xl-11order: 11;
order-xl-12order: 12;
order-xl-lastorder: 13;
align-content-startalign-content: flex-start;
align-content-endalign-content: flex-end;
align-content-centeralign-content: center;
align-content-space-betweenalign-content: space-between;
align-content-space-aroundalign-content: space-around;
align-content-space-evenlyalign-content: space-evenly;
align-content-stretchalign-content: stretch;
align-content-sm-startalign-content: flex-start;
align-content-sm-endalign-content: flex-end;
align-content-sm-centeralign-content: center;
align-content-sm-space-betweenalign-content: space-between;
align-content-sm-space-aroundalign-content: space-around;
align-content-sm-space-evenlyalign-content: space-evenly;
align-content-sm-stretchalign-content: stretch;
align-content-md-startalign-content: flex-start;
align-content-md-endalign-content: flex-end;
align-content-md-centeralign-content: center;
align-content-md-space-betweenalign-content: space-between;
align-content-md-space-aroundalign-content: space-around;
align-content-md-space-evenlyalign-content: space-evenly;
align-content-md-stretchalign-content: stretch;
align-content-lg-startalign-content: flex-start;
align-content-lg-endalign-content: flex-end;
align-content-lg-centeralign-content: center;
align-content-lg-space-betweenalign-content: space-between;
align-content-lg-space-aroundalign-content: space-around;
align-content-lg-space-evenlyalign-content: space-evenly;
align-content-lg-stretchalign-content: stretch;
align-content-xl-startalign-content: flex-start;
align-content-xl-endalign-content: flex-end;
align-content-xl-centeralign-content: center;
align-content-xl-space-betweenalign-content: space-between;
align-content-xl-space-aroundalign-content: space-around;
align-content-xl-space-evenlyalign-content: space-evenly;
align-content-xl-stretchalign-content: stretch;
flex-nowrapflex-wrap: nowrap;
flex-wrapflex-wrap: wrap;
flex-wrap-reverseflex-wrap: wrap-reverse;
flex-grow-0flex-grow: 0;
flex-grow-1flex-grow: 1;
flex-shrink-0flex-shrink: 0;
flex-shrink-1flex-shrink: 1;
flex-sm-grow-0flex-grow: 0;
flex-md-grow-0flex-grow: 0;
flex-lg-grow-0flex-grow: 0;
flex-xl-grow-0flex-grow: 0;
flex-sm-grow-1flex-grow: 1;
flex-md-grow-1flex-grow: 1;
flex-lg-grow-1flex-grow: 1;
flex-xl-grow-1flex-grow: 1;
flex-sm-shrink-0flex-shrink: 0;
flex-md-shrink-0flex-shrink: 0;
flex-lg-shrink-0flex-shrink: 0;
flex-xl-shrink-0flex-shrink: 0;
flex-sm-shrink-1flex-shrink: 1;
flex-md-shrink-1flex-shrink: 1;
flex-lg-shrink-1flex-shrink: 1;
flex-xl-shrink-1flex-shrink: 1;

启用 flexbox ​

使用display （显示）实用程序，你可以将任何元素转换成弹性容器，将**direct children elements （直接子元素）**转换成弹性项。使用额外的 flex 属性实用程序，您可以进一步自定义它们的交互。

您还可以基于各种断点应用自定义的 flex 工具类。

注意 ​

INFO

需要注意的是，使用上述任何显示类都会导致覆盖之前添加的任何显示样式。这是因为类在其显示样式中使用了!important。

Flex 速记 ​

flex 工具类可以用来修改flex css 属性。这使得在伸缩容器中定位伸缩项变得很容易。

Flex 方向 ​

默认情况下，d-flex应用flex-direction: row，通常可以省略。然而，在某些情况下，您可能需要显式地定义它。

flex-column 和 flex-column-reverse 是用来改变 flexbox 容器方向的实用类。

Flex justify (垂直对齐) ​

justify-content可以使用 flex 对齐类更改对齐内容的灵活设置。默认情况下，这将修改 x 轴上的x-axis ，但当使用flex-direction: column修改 y 轴时， y-axis情况将相反。选择start (开始)(浏览器默认)、end (结束)、center (居中)、space-between (间隔)、space-around (环绕)或space-evenly (均匀间隔)。

Flex align (水平对齐) ​

可以使用 flex align 类更改align-items的灵活设置。默认情况下，这将修改 y 轴上的y-axis，但当使用flex-direction: column修改 x 轴时，x-axis情况将相反。从start (开始)、end (结束)、center (居中)、baseline (基线)或stretch (拉伸)(浏览器默认值)中选择。

Flex align self (伸缩对齐自适应) ​

align-self flex 设置可以使用 flex align-self 类进行更改。默认情况下，这将在 y 轴上修改单个y-axis ，但当使用flex-direction: column修改 x 轴时，x-axis情况将相反。从start (开始)、end (结束)、center (居中)、baseline (基线)、stretch (拉伸)或auto (自动)(浏览器默认值，从 flex 容器应用 align-items 属性)中进行选择。

Auto margins （自动填充-x） ​

使用 flexx 容器中的边距 helper 类，可以在分别使用flex-row或flex-column时控制 flex 项在x-axis or y-axis（x 轴或 y 轴上的位置）。

使用 align-items （自动填充-y） ​

混合flex-direction: column和align-items，你可以使用.mt-auto和.mb-auto辅助类来调整 flex 项目的位置。

Flex wrap (换行处理) ​

默认情况下，.d-flex不提供任何包装(行为类似于flex-wrap: nowrap)。这可以通过以flex-{condition}格式应用 flex-wrap helper 类来修改，其中 condition 可以是nowrap、wrap或wrap-reverse。

这些辅助类也可以以flex-{breakpoint}-{condition}的格式应用，以基于断点创建响应更快的变体。以下组合是可用的:

Flex order (顺序) ​

您可以使用order实用工具更改伸缩项的可视顺序。

Flex align content ​

可以使用 flex align-content类更改 align-content flex 设置。默认情况下，这将在 y 轴上修改包装的 y-axis，但当使用flex-direction: column修改 x 轴时， x-axis情况将相反。可以选择start(开始)、end(结束)、center(居中)、space-between(间隔)、space-around(环绕)、space-evenly(均匀间隔)或stretch（拉伸）(浏览器默认设置)。

Flex grow and shrink （伸缩盒子会收缩以适应空间。） ​

Vuetify 有用于手动应用增长和收缩的辅助类。这些可以通过以flex-{condition}-{value}的格式添加 helper 类来应用，其中 condition 可以grow or shrink，value 可以为 0 或 1 。条件grow将允许元素增长以填充可用空间，而shrink将允许元素缩小到仅满足其内容所需的空间。但是，只有当元素必须收缩以适应其容器时才会发生这种情况，例如容器调整大小或受到flex-grow-1的影响。值0将防止这种情况发生,而值1将允许该条件发生。以下类可供选择:

这些辅助类也可以以flex-{breakpoint}-{condition}-{state}的格式应用，以基于断点创建响应更快的变体。以下组合是可用的: