时间戳

首页 > 解决方案 > 嵌套的 flexbox 无法在旧的 Android 浏览器中正确显示

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

问题描述

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

这似乎是嵌套弹性行和列的错误，但我无法找到解决方法。

标签： htmlcssflexbox

解决方案

推荐阅读