铁柔性布局：没有得到正确的布局 [英] Iron flex layout: not getting the proper layout

问题描述

我正在使用铁弹性布局

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

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

• 导入文件
  
  

  < link rel =importhref =bower_components / iron-flex-layout将模块包含在样式中

/ code>

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

如果您想了解有关CSS flexbox ，点击这里。

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

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

 <模板> 
< style include =iron-flex iron-flex-alignment> 
 
 .inline {
 background-color：＃263367; 
 padding：12px; 
 margin：4px; 
 / * height：300px; * / 
 border：1px纯黑; 
 
} 
 
 .layout-center-justified {
 background-color：＃289378; 
 padding：12px; 
 margin：4px; 
 / * height：100px; * / 
} 
< / style> 
 
 
< div class =vertical layout> 
< div class =水平布局对齐> 
< div class =layout inline layout-center-justifiedstyle =height：154px> 
< div>横轴开始对齐< / div> 
< / div> 
 
< div class =layout flex inline layout-startstyle =height：74px width：24px> 
< div>横轴开始对齐< / div> 
< / div> 
< / div> 
< div class =水平布局对齐> 
< div class =layout inline layout-startstyle =height：154px> 
< div>横轴开始对齐< / div> 
< / div> 
 
< div class =layout inline layout-startstyle =height：154px> 
< div>横轴开始对齐< / div> 
< / div> 
 
< div class =layout inline layout-startstyle =height：154px> 
< div>横轴开始对齐< / div> 
< / div> 
< / div> 
< / div> 
< / template> 
  

查看演示这里。

i am using iron flex layout https://www.webcomponents.org/element/PolymerElements/iron-flex-layout i wanted to align my div like a dashboard view but i am not able to align the boxes, i am using the layout standards https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html mentioned here, no other iron flex styling is working other than layout inline layout-start

The template look likes

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

The div is not showing when i am using layout inline layout-center-justified

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

can anyone guide me how should i style the below boxes so that it can come according to my requirment and how should i use

解决方案

To use the iron-flex-layout make sure you read this guide: https://elements.polymer-project.org/guides/flex-layout.

To use layout classes import the iron-flex-layout-classes file. You must do the followings in any element that uses any of the iron-flex-layout styles:

• Import the file

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

• Include the modules in style

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

If you want to learn basics about CSS flexbox, click here.

For you problem you will need at least one flex container.

Here is the updated code using flex container:

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

Check out the demo here.

这篇关于铁柔性布局：没有得到正确的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！