flex.direction String (default: 'row')

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.

Example of ListView with flex column layout

<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>