嵌套的Flexbox在旧的Android浏览器中无法正确显示

时间:2018-06-21 11:06:40

标签: css html5 css3 flexbox

我需要创建的网页有一个烦人的问题,该网页将加载到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%。

似乎是带有嵌套的行和列的错误,但是我无法解决此问题。

0 个答案:

没有答案