溢出时如何在 "right" 上发送元素?
How send elements on the "right" when there is an overflow?
我想创建以下方案中解释的行为:
每次元素在屏幕外时,我都希望将其放置在右侧的新列中。
目前,所有元素都在同一列中。
这是我的元素当前的显示方式:
<style is="custom-style" include="iron-flex">
.flex-wrap {
@apply(--layout-wrap);
@apply(--layout-vertical);
}
</style>
<template>
<div class="container flex-wrap" >
<template is="dom-repeat" items="{{employeesArray}}">
<employee-element name="{{item.title}}"
preview="{{item.preview}}"
width={{item.width}} height={{item.height}}>
</employee-element>
</template>
</div>
</template>
如何强制将元素放置在我绘制的位置?
可以使用大多数较新的浏览器支持的列属性来完成:
.container {
height: 100px;
border: 1px solid black;
column-fill: auto;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-width: 150px;
-webkit-column-width: 150px;
-moz-column-width: 150px;
}
HTML:
<div class="container">
<div>employee #1</div>
<div>employee #2</div>
....
<div>employee #x</div>
</div>
看到这个jsfiddle. More on colomn properties in CSS can be found here。
我想创建以下方案中解释的行为:
每次元素在屏幕外时,我都希望将其放置在右侧的新列中。
目前,所有元素都在同一列中。
这是我的元素当前的显示方式:
<style is="custom-style" include="iron-flex">
.flex-wrap {
@apply(--layout-wrap);
@apply(--layout-vertical);
}
</style>
<template>
<div class="container flex-wrap" >
<template is="dom-repeat" items="{{employeesArray}}">
<employee-element name="{{item.title}}"
preview="{{item.preview}}"
width={{item.width}} height={{item.height}}>
</employee-element>
</template>
</div>
</template>
如何强制将元素放置在我绘制的位置?
可以使用大多数较新的浏览器支持的列属性来完成:
.container {
height: 100px;
border: 1px solid black;
column-fill: auto;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-width: 150px;
-webkit-column-width: 150px;
-moz-column-width: 150px;
}
HTML:
<div class="container">
<div>employee #1</div>
<div>employee #2</div>
....
<div>employee #x</div>
</div>
看到这个jsfiddle. More on colomn properties in CSS can be found here。