New to Kendo UI for jQuery? Start a free 30-day trial

Flex

configuration

Flex layout settings

flex

Object

<div id="listview"></div>
<script>
$("#listview").kendoListView({
    dataSource: [
        { name: "Item 1" },
        { name: "Item 2" },
        { name: "Item 3" }
    ],
    template: "<div class='k-listview-item'>#: name #</div>",
    layout: "flex",
    flex: {
        direction: "column",
        wrap: "wrap"
    }
});
</script>

flex.direction

String

Defines the direction flex items are placed in the flex container. Think of flex items as primarily laying out either in horizontal rows or vertical columns. Valid values are:

row: This is equivalent to flex-direction: row. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in ltr; right to left in rtl.
row-reverse: This is equivalent to flex-direction: row-reverse. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in ltr; left to right in rtl.
column: This is equivalent to flex-direction: column. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
column-reverse: This is equivalent to flex-direction: column-reverse. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.

Default: 'row'

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

<div id="listView"></div>
<div id="pager" class="k-pager"></div>

<script type="text/x-kendo-template" id="template">
    <div class="product">
        <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
  </div>
</script>

<script>
  $(function() {
    var dataSource = new kendo.data.DataSource({
      data: products,
      pageSize: 21
    });

    $("#pager").kendoPager({
      dataSource: dataSource
    });

    $("#listView").kendoListView({
      dataSource: dataSource,
      layout: "flex",
      flex: {
        direction: "column",
      },
      template: kendo.template($("#template").html())
    });
  });
</script>
<style>
  .product{
    width: 100px;
  }
  .product h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9em;
  }
</style>

flex.wrap

String

By default, flex items will all try to fit onto one line. Customizing the property defines how items wrap or not within flex continer. Valid values are:

wrap: This is equivalent to flex-wrap: wrap. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
nowrap: This is equivalent to flex-wrap: nowrap. All flex items will be on one line.
wrap-reverse:This is equivalent to flex-wrap: wrap-reverse. It allows flex items to wrap as needed onto multiple lines, from bottom to top.

Default: 'nowrap'

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

<div id="listView"></div>
<div id="pager" class="k-pager"></div>

<script type="text/x-kendo-template" id="template">
    <div class="product">
        <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
  </div>
</script>

<script>
  $(function() {
    var dataSource = new kendo.data.DataSource({
      data: products,
      pageSize: 21
    });

    $("#pager").kendoPager({
      dataSource: dataSource
    });

    $("#listView").kendoListView({
      dataSource: dataSource,
      layout: "flex",
      flex: {
        wrap: "wrap"
      },
      template: kendo.template($("#template").html())
    });
  });
</script>
<style>
  .product{
    width: 100px;
  }
  .product h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .9em;
  }
</style>