不遵循弹性百分比的弹性布局
Flex Layout not following flex percentages
我正在 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 的高度也没有遵循。
有人可以帮我解决这个问题吗?
简单使用 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>
<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
我正在 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 的高度也没有遵循。 有人可以帮我解决这个问题吗?
简单使用 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>
<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