Vue Box - Arrange and Align Items
Items can be arranged in a row or in a column depending on the value of the direction property.
App.vue
- <template>
- <DxBox
- :height="200"
- :width="200"
- direction="row"> <!-- or "col" -->
- <!-- ... -->
- </DxBox>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxBox } from 'devextreme-vue/box';
- export default {
- components: {
- DxBox
- }
- };
- </script>
If the Box items do not occupy the entire Box, you can align them along and crosswise the specified direction. For this purpose, use the align and crossAlign properties, respectively.
App.vue
- <template>
- <DxBox
- :height="200"
- :width="200"
- align="center"
- cross-align="stretch">
- <!-- ... -->
- </DxBox>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxBox } from 'devextreme-vue/box';
- export default {
- components: {
- DxBox
- }
- };
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.