不遵循弹性百分比的弹性布局

Question

我正在 angular 应用中尝试弹性布局。我正在尝试创建一个以 base 为基础的布局：

我试过写代码。

我的.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 Layout 工作不正常，div 的高度也没有遵循。有人可以帮我解决这个问题吗？

Answer 1

简单使用 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>

Answer 2

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

不遵循弹性百分比的弹性布局

Flex Layout not following flex percentages

html

css

angular

flexbox

angular-flex-layout

简单使用 flex 并用 div