Iron flex 布局：没有得到正确的布局

Question

我正在使用 Iron flex 布局 https://www.webcomponents.org/element/PolymerElements/iron-flex-layout 我想像仪表板视图一样对齐我的 div 但我无法对齐框，我使用的是此处提到的布局标准https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html，除了布局内联布局启动之外，没有其他的 Iron flex 样式可用

模板看起来像

 </custom-style>
 <style>

    .layout {
     background-color: #263367;
     padding: 12px;
     margin: 4px;
     height: 300px;
   }
   .layout.center-justified{
     background-color: #289378;
     padding: 12px;
     margin: 4px;
     height: 100px;

 }

   </style>

   <div class="layout inline layout-center-justified" style="height: 154px">
      <div>cross axis start alignment</div>
     </div>

   <div class="layout inline layout-start" style="height: 74px width:24px">
     <div>cross axis start alignment</div>
   </div>

    <div class="layout inline layout-start" style="height: 154px">
   <div>cross axis start alignment</div>
   </div>

  <div class="layout inline layout-start" style="height: 154px">
  <div>cross axis start alignment</div>
 </div>

  <div class="layout inline layout-start" style="height: 154px">
     <div>cross axis start alignment</div>
  </div>

当我使用布局内联 layout-center-justified 时，div 不显示

 <div class="layout inline layout-center-justified" style="height: 154px">
      <div>cross axis start alignment</div>
     </div>

谁能指导我如何设置以下框的样式 以便它可以根据我的要求来，我应该如何使用https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html以便我可以使用其他布局类？

Answer 1

要使用iron-flex-layout，请务必阅读本指南：https://elements.polymer-project.org/guides/flex-layout。

要使用布局类，请导入 iron-flex-layout-classes 文件。您必须在使用任何iron-flex-layout 样式的任何元素中执行以下操作：

• 导入文件

  <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">

• 包含style中的模块

  <style include="iron-flex iron-flex-alignment">
  

如果你想了解 CSS 的基础知识flexbox，click here。

对于您的问题，您至少需要一个弹性容器。

这是使用 flex 容器的更新代码：

<template>
    <style include="iron-flex iron-flex-alignment">

      .inline {
        background-color: #263367;
        padding: 12px;
        margin: 4px;
        /*height: 300px;*/
        border: 1px solid black;

      }

      .layout-center-justified {
        background-color: #289378;
        padding: 12px;
        margin: 4px;
        /*height: 100px;*/
      }
    </style>


    <div class="vertical layout">
      <div class="horizontal layout justified">
        <div class="layout inline layout-center-justified" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout flex inline layout-start" style="height: 74px width:24px">
          <div>cross axis start alignment</div>
        </div>
      </div>
      <div class="horizontal layout justified">
        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>
      </div>
    </div>
</template>

查看demo here。