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，除了内联布局 layout-start

之外，没有其他 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。

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

Iron flex layout: not getting the proper layout

css

flexbox

polymer-1.0