如何在布局内水平滚动=角度材料中的行答案

【问题标题】：How to scroll horizontally inside layout=row in angular material如何在布局内水平滚动=角度材料中的行
【发布时间】：2017-10-28 02:32:04
【问题描述】：

我正在尝试制作一个带有卡片的水平滚动条的滑块，为了实现这一点，我尝试使用 ng-repeat 在里面滚动 layout="row"

https://codepen.io/williamscott701/pen/GmLada

<body ng-app="myApp" ng-cloak ng-controller="ProductController">
  <md-content class=" md-padding " layout="column ">
    <div layout="row">
      <div flex="33" ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] ">
        <md-card>[ flex = 33 ]
        <md-card>
      </div>
    </div>    
  </md-content>
</body>

不知道哪里出了问题

谢谢

【问题讨论】：

标签： angularjs layout scroll flexbox angular-material

【解决方案1】：

对于水平滚动，您需要元素的内容宽度大于它的宽度，为此您需要确定一个数字作为内容的宽度。（我选择了300vw）

例如：

<body ng-app="myApp" ng-cloak ng-controller="ProductController">
  <md-content class=" md-padding " layout="column ">
    <div layout="row" style="width: 300vw;">
      <div flex ng-repeat="y in [1,2,3,4,5,6,7,8,9,10,11] ">
        <md-card>[ flex = 33 ]
          <md-card>
      </div>
    </div>
  </md-content>
</body>

还要注意flex="33" 将尝试放置 3 个元素，所有元素都具有父宽度的 33%，但因为它有超过 3 个元素，它们只会使它们均匀地填充宽度，所以只需一个 flex 指令即可给你同样的结果。

【讨论】：

【解决方案2】：

为了滚动工作，您需要为卡片提供最小宽度。

md-card {
  min-width: 200px;
}

div[layout="row"] {
  overflow: auto;
}

这里是更新代码笔的链接

https://codepen.io/vibhanshu/pen/YVMbob?editors=1100

【讨论】：