如何将Flexbox与Polymer一起使用来制作表格 [英] How do I use flexbox together with Polymer to make tables
本文介绍了如何将Flexbox与Polymer一起使用来制作表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在Polymer中使用flexbox来创建表格。
但是主要的问题是，当我改变计算机分区的大小时，由于其中的内容细胞挤压。在下面的例子中，尝试调整浏览器窗口的大小。
<！doctype html>如何让它遵循由flex定义的大小作为第一优先级？
< html>
< head>
< script src ='.. / bower_components / webcomponentsjs / webcomponents-lite.js'>< / script>
< link rel ='import'href ='.. / bower_components / iron-flex-layout / iron-flex-layout-classes.html'>
< / head>
< body unresolved>
< dom-module id ='base-page'>
< style include ='iron-flex iron-flex-alignment'>
.border {
border：1px纯红色;
}
< / style>
< template>
< div class ='vertical layout'style ='width：50％'>
< div class ='horizontal layout'>
< div class ='flex border'> Short< / div>
< div class ='flex border'>这是一个muuuuuuuuuuuuuuuuuuch更长的文字< / div>
< div class ='flex border'>而这个即媒体< / div>
< / div>
< div class ='horizontal layout'>
< div class ='flex border'> e< / div>
< div class ='flex border'> e< / div>
< div class ='flex border'> e< / div>
< / div>
< / div>
< / template>
< / dom-module>
< script>
HTMLImports.whenReady（function（）{Polymer（{
is：'base-page'
}）;}）;
< / script>
< base-page>< / base-page>
< / body>
谢谢
干杯
解决方案
将这个添加到边界类应该解决这个问题。
word-break：break-word;
<！doctype html>< html>< head> < base href =https://polygit.org/components/> < script src ='webcomponentsjs / webcomponents-lite.js'>< / script> < link rel ='import'href ='polymer / polymer.html'> < link rel ='import'href ='iron-flex-layout / iron-flex-layout-classes.html'>< / head>< body unresolved> < dom-module id ='base-page'> < style include ='iron-flex iron-flex-alignment'> .border {border：1px纯红色;断字：断字; }< / style> <模板> < div class ='vertical layout'style ='width：50％'> < div class ='horizontal layout'> < div class ='flex border'> Short< / div> < div class ='flex border'>这是一个muuuuuuuuuuuuuuuuuuch更长的文字< / div> < div class ='flex border'>而这个即媒体< / div> < / DIV> < div class ='horizontal layout'> < div class ='flex border'> e< / div> < div class ='flex border'> e< / div> < div class ='flex border'> e< / div> < / DIV> < / DIV> < /模板> < / DOM模块> <脚本> HTMLImports.whenReady（function（）{Polymer（{is：'base-page'}）;}）; < /脚本> < base-page>< / base-page>< / body>
I would like to use flexbox in Polymer to create tables out of divs. But the main problem is that by "cells" squish because of the content inside it when I change the size of the puter div. In the example below, try resizing the browser window. How do I get it to obey the size defined by flex as first priority while still wrapping text?
<!doctype html>
<html>
<head>
<script src='../bower_components/webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {Polymer({
is: 'base-page'
});});
</script>
<base-page></base-page>
</body>
Thanks
Cheers
解决方案
Adding this to your border class should solve the issue.
word-break: break-word;
<!doctype html>
<html>
<head>
<base href="https://polygit.org/components/">
<script src='webcomponentsjs/webcomponents-lite.js'></script>
<link rel='import' href='polymer/polymer.html'>
<link rel='import' href='iron-flex-layout/iron-flex-layout-classes.html'>
</head>
<body unresolved>
<dom-module id='base-page'>
<style include='iron-flex iron-flex-alignment'>
.border {
border: 1px solid red;
word-break: break-word;
}
</style>
<template>
<div class='vertical layout' style='width:50%'>
<div class='horizontal layout'>
<div class='flex border'>Short</div>
<div class='flex border'>This is a muuuuuuuuuuuuuuuuuch longer text</div>
<div class='flex border'>And this ie medium</div>
</div>
<div class='horizontal layout'>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
<div class='flex border'>e</div>
</div>
</div>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'base-page'
});
});
</script>
<base-page></base-page>
</body>
这篇关于如何将Flexbox与Polymer一起使用来制作表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
