如何将 flexbox 与 Polymer 一起使用来制作表格答案

【问题标题】：How do I use flexbox together with Polymer to make tables如何将 flexbox 与 Polymer 一起使用来制作表格
【发布时间】：2016-07-16 03:09:31
【问题描述】：

我想在 Polymer 中使用 flexbox 从 div 中创建表格。但主要问题是，当我更改 puter div 的大小时，由于其中的内容，“单元格”会挤压。在下面的示例中，尝试调整浏览器窗口的大小。如何让它遵守 flex 定义的大小作为第一优先级，同时仍然换行？

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

谢谢

干杯

【问题讨论】：

标签： html css polymer html-table flexbox

【解决方案1】：

将此添加到您的 border 课程应该可以解决问题。

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>

【讨论】：

哇……是这样吗……我想知道我什么时候会掌握 css。谢谢一百万