DevExtreme Angular - Arrange and Align Items

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

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
  • ],
  • // ...
  • })

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 options, respectively.

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
  • ],
  • // ...
  • })
See Also