DevExtreme React - Arrange and Align Items
Items can be arranged in a row or in a column depending on the value of the direction option.
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 ], // ... })
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.
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 ], // ... })
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.