我需要创建的网页有一个烦人的问题,该网页将加载到Android 4.4.2的浏览器(Webkit)中。页面布局
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.m-5 {
margin: 5px;
}
div {
display: inline-block;
float:left;
clear:none;
background-color: rgba(55, 55, 255, .2);
}
/*
Display
*/
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-none {
display: none !important;
}
/*
Direction
*/
.flex-row {
flex-direction: row !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
/*
Justify Content
*/
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
/*
Align Items
*/
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
/*
Align Self
*/
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.align-self-stretch {
align-self: stretch !important;
}
/*
Align Content
*/
.align-content-start {
align-content: flex-start !important;
}
.align-content-end {
align-content: flex-end !important;
}
.align-content-center {
align-content: center !important;
}
.align-content-around {
align-content: space-around !important;
}
.align-content-stretch {
align-content: stretch !important;
}
/*
Wrap
*/
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
/*
Flex options
*/
.flex-grow {
flex-grow: 1 !important;
}
.flex-shrink {
flex-shrink: 1 !important;
}
.flex-basis-12 {
flex-basis: 100% !important;
}
.flex-basis-11 {
flex-basis: calc((11/12) * 100%) !important;
}
.flex-basis-10 {
flex-basis: calc((10/12) * 100%) !important;
}
.flex-basis-9 {
flex-basis: calc((9/12) * 100%) !important;
}
.flex-basis-8 {
flex-basis: calc((8/12) * 100%) !important;
}
.flex-basis-7 {
flex-basis: calc((7/12) * 100%) !important;
}
.flex-basis-6 {
flex-basis: calc((6/12) * 100%) !important;
}
.flex-basis-5 {
flex-basis: calc((5/12) * 100%) !important;
}
.flex-basis-4 {
flex-basis: calc((4/12) * 100%) !important;
}
.flex-basis-3 {
flex-basis: calc((3/12) * 100%) !important;
}
.flex-basis-2 {
flex-basis: calc((2/12) * 100%) !important;
}
.flex-basis-1 {
flex-basis: calc((1/12) * 100%) !important;
}
.flex-basis-auto {
flex-basis: auto !important;
}
/*
Size
*/
.w-100 {
width: 100% !important;
}
.h-100 {
height: 100% !important;
}
::after, ::before {
box-sizing: border-box;
}
<body>
<div class="h-100 w-100 d-flex flex-column">
<div class="m-5 flex-basis-1 d-flex flex-row">
<div class="m-5 flex-basis-3"></div>
<div class="m-5 flex-basis-3" style="background-color: transparent"></div>
<div class="m-5 flex-basis-3"></div>
<div class="m-5 flex-basis-3" style="background-color: transparent"></div>
</div>
<div class="m-5 flex-basis-11 d-flex flex-row">
<div class="m-5 flex-basis-7 d-flex flex-column">
<div class="m-5 flex-basis-9"></div>
<div class="m-5 flex-basis-3 d-flex flex-row">
<div class="m-5 flex-basis-4"></div>
<div class="m-5 flex-basis-4"></div>
<div class="m-5 flex-basis-4"></div>
</div>
</div>
<div class="m-5 flex-basis-5 d-flex flex-column"></div>
</div>
</div>
</body>
在您的浏览器中,此布局(应正确放置),但在Android 4上,左侧面板不显示其顶部和底部。如果我将左侧面板的方向更改为行,则项目将按预期显示,但显然我不能将其连续显示。如果我删除左侧面板的两个子代的flex-basis并添加flex-grow,它也会按预期显示,每个面板的50%。
似乎是带有嵌套的行和列的错误,但是我无法解决此问题。