弹性布局不遵循弹性百分比答案

【问题标题】：Flex Layout not following flex percentages弹性布局不遵循弹性百分比
【发布时间】：2019-12-23 09:19:51
【问题描述】：

我正在我的 Angular 应用程序中尝试 flex 布局。我正在尝试创建一个基本布局为：

我试过写代码。

我的 .html 文件


<div flexLayout = "row">
  <div fxFlex="100%" class="first_bar">
     Second Div
  </div>
</div>

<div flexLayout = "row">
  <div fxFlex="100%" class="second_bar">
     Third Div
  </div>
</div>

<div flexLayout = "row">
  <div fxFlex="12%" class="third_bar_1">
     Fourth Div 1
    <!-- <h5>third div</h5> -->
  </div>
  <div fxFlex="86%" class="third_bar_2">
     Fourth Div 2
  </div>
</div>

.first_bar{
    background-color: #cdf7fb;
    height: 6%;
}

.second_bar{
    background-color: #cdf7;
    height: 12px;     
}

.third_bar_1{
    background-color: #6390c3;
}

.third_bar_2{   
    background-color: white;
}

但我的输出看起来像

Flex 布局无法正常工作，也没有遵循 div 的高度。有人可以帮我解决这个问题吗？

【问题讨论】：

我不明白你在哪里使用 flex
<div flexLayout = "row"> <div fxFlex="100%" class="first_bar">
这不是灵活的吗？如果我错了，请纠正我
如果你不使用display: flex是不是flex
您是否将 FlexLayoutModule 导入到模块中？如果您不这样做，它永远不会发出任何警告

标签： html css angular flexbox angular-flex-layout

【解决方案1】：

    <div fxLayout="column" fxLayoutAlign="start space-between" fxLayoutGap="10px">
        <div class="first_bar">
          Second Div
        </div>
      <div fxLayout="row" fxLayoutAlign="space-bewteen start" fxLayoutGap="10px">
        <div fxFlex="12" class="second_bar">
          Side
        </div>
        <div fxFlex="88" fxLayout="column"  fxLayoutAlign="space-bewteen" fxLayoutGap="10px">
          <div [ngClass]="['third_bar_1']">
          first
          </div>
          <div [ngClass]="['third_bar_2']">
          second
          <div>
        </div>
      </div>
   </div>

CSS

.first_bar{
        background-color: #cdf7fb;
        height: 100px;
    }

    .second_bar{
        background-color: #cdf7;
        height: calc(100vh - 200px);  
    }

    .third_bar_1{
        background-color: #6390c3;
        height: 100px;
    }

    .third_bar_2{   
        border:1px solid red;
        height: calc(100vh - 315px);
    }

正在工作的 stackblitz 链接here

【讨论】：

我使用了相同的代码，但是所有的 div 都一个接一个地出现
查看我给的链接
我已经从stackblitz复制了html和css代码的代码，但同样的事情。我应该导入或安装任何东西让 flex 工作吗？
看来，你的 flex 没有正确安装 .. 安装 npm i @angular/flex-layout --save 然后将 FlexLayoutModule 导入 app.module.ts

【解决方案2】：

简单使用flex并用div包裹所有

.main {
  display: flex;
  flex-wrap: wrap;
}

.first_line {
  width: 100%;
  height: 50px;
}

.first_bar {
  background-color: #cdf7fb;
  height: 6%;
  width: 100%;
  height: 100%;
}

.all_below {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.second_wrap {
  height: 200px;
  width: 20%;
}

.second_bar {
  background-color: #6390c3;
  height: 100%;
}

.third_wrap {
  width: 80%;
}

.third_bar_1 {
  background-color: #cdf7;
  height: 100px;
}

.third_bar_2 {
  background-color: lightblue;
  height: 100px;
}

<div></div>
<div class="main">
  <div flexLayout="row" class="first_line">
    <div fxFlex="100%" class="first_bar">
      Second Div
    </div>
  </div>

  <div class="all_below">
    <div flexLayout="row" class="second_wrap">
      <div fxFlex="100%" class="second_bar">
        Third Div
      </div>
    </div>

    <div flexLayout="row" class="third_wrap">
      <div fxFlex="12%" class="third_bar_1">
        Fourth Div 1
        <!-- <h5>third div</h5> -->
      </div>
      <div fxFlex="86%" class="third_bar_2">
        Fourth Div 2
      </div>
    </div>
  </div>
</div>

【讨论】：