css - 铁柔性布局 : not getting the proper layout

Question

我正在使用 iron flex 布局 https://www.webcomponents.org/element/PolymerElements/iron-flex-layout我想像仪表板 View 一样对齐我的 div 但我无法对齐方框，我使用的是布局标准 https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html这里提到，除了 layout inline 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 容器。

这是使用 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 .