React Box - Arrange and Align Items

Items can be arranged in a row or in a column depending on the value of the direction property.

jQuery
JavaScript
$(function() {
    $("#boxContainer").dxBox({
        direction: "row", // or "col"
        height: 200,
        width: 200
    });
});
Angular
HTML
TypeScript
<dx-box
    [height]="200"
    [width]="200"
    direction="row"> <!-- or "col" -->
    <!-- ... -->
</dx-box>
import { DxBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxBox
        :height="200"
        :width="200"
        direction="row"> <!-- or "col" -->
        <!-- ... -->
    </DxBox>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxBox } from 'devextreme-vue/box';

export default {
    components: {
        DxBox
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Box from 'devextreme-react/box';

class App extends React.Component {
    render() {
        return (
            <Box
                height={200}
                width={200}
                direction="row"> {/* or "col" */}
                {/* ... */}
            </Box>
        );
    }
}

export default App;

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.

jQuery
JavaScript
$(function() {
    $("#boxContainer").dxBox({
        direction: "col",
        height: 200,
        align: "center",
        crossAlign: "stretch"
    });
});
Angular
HTML
TypeScript
<dx-box
    direction="col"
    [height]="200"
    align="center"
    crossAlign="stretch">
    <!-- ... -->
</dx-box>
import { DxBoxModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxBox
        :height="200"
        :width="200"
        align="center"
        cross-align="stretch">
        <!-- ... -->
    </DxBox>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { DxBox } from 'devextreme-vue/box';

export default {
    components: {
        DxBox
    }
};
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import Box from 'devextreme-react/box';

class App extends React.Component {
    render() {
        return (
            <Box
                height={200}
                width={200}
                align="center"
                crossAlign="stretch">
                {/* ... */}
            </Box>
        );
    }
}

export default App;
See Also