如何在 Vaadin 13 中使用 css flex-direction 属性？

Question

在 Vaadin 13 中，我想对 html 样式的 TextArea 标签使用 flex-direction，但它不起作用

textArea1.addClassName("my-text-area1");
textArea2.addClassName("my-text-area2");

<dom-module theme-for="vaadin-text-area" id="style-for-text-area1">
    <template>
        <style>
            :host(.my-text-area1) [part="label"]{
                align-self: center;
                flex-direction: column;
            }
            :host(.my-text-area2) [part="label"]{            
                align-self: flex-start;
                flex-direction: row;
            }        
        </style>
    </template>
</dom-module>

对于第一个文本区域，我希望 TextArea 标签对齐 column/center，对于第二个文本区域 row/flex-start。关于如何解决这个问题有什么想法吗？

Answer 1

您尝试将 flex-direction 用于什么目的？标签部分中没有可能受方向变化影响的元素......所以你可能想将方向应用于不同的部分。

如果您的目标是将标签放在值的左侧，那么您需要执行类似

的操作

<dom-module theme-for="vaadin-text-area" id="style-for-text-area">
    <template>
        <style>
            :host(.my-text-area) [part="label"]{
                padding-right: 5px;
            }
            :host(.my-text-area) .vaadin-text-field-container {
                flex-direction: row;
            }    
        </style>
    </template>
</dom-module>

上述样式还可能会改变需要如何设置组件的宽度和高度以获得最佳外观。

另请注意为标签添加的填充。

如何在 Vaadin 13 中使用 css flex-direction 属性？

how to use css flex-direction property in Vaadin 13?

html

vaadin-flow