疑惑现象：

弹性布局父元素的height=所有子元素的元素高度，而子元素又能继承父元素高度（height:100%）。

可能过程：

先使用子元素总高度撑起父元素高度，子元素再继承父元素高度。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="border: 2px solid black;box-sizing: border-box;">
<div style="border:2px solid red;display: flex;"><div style="height: auto;"><div style="height: 100%;border: 5px solid yellow;box-sizing: border-box;"><h1>1</h1><input><input><input><input></div><div style="height: 100%;border: 5px solid green;box-sizing: border-box;"><h1>2</h1><input><input><input><input></div></div>
</div>
</body>
</html>

博文引用-启发：

由多次测试我猜测是首次渲染之后，父元素未设置高度，子元素即使设置height：100%；
获取不到父元素高度，高度由子元素的内容决定。
而dispaly:flex;弹性布局会动态计算元素的高度，在确定最大的元素高度之后，相当于父元素高度确定，再由于height: auto;的存在由浏览器计算出其他子元素的高度，最终使得各个子元素高度统一。

其他：

有明白具体过程的嘛？欢迎留言指教。

相关参考：
CSS height 及 flex布局一则

CSS 弹性布局（flex）的height计算相关推荐

CSS 弹性布局/flex布局最后一行左对齐
设计案例: 左对齐前左对齐后 html: <h1 class="module-title">核心产品</h1> <ul class="co ...
CSS弹性布局 Flex属性
flex是Flexible Box的缩写,就是弹性盒子布局的意思通过flex我们可以解决元素居中问题,自动弹性伸缩,适配不同大小的屏幕和移动端. Flex布局简介序号简记术语 1 二成员容器 ...
css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
CSS 的弹性布局(flex) ，是什么？
一.弹性布局是什么? 元素根据窗口大小变化而自动伸长或缩短,使得整个页面格式保持不变. 二.怎么使用? 1.使用方法 /* 1.父元素中增加 display 属性:*/ display: flex; ...
css弹性布局笔记一（垂直居中、水平居中、居中）（display:flex）
CSS弹性布局,需要一个容器,容器中至少包含一个以上的元素,以下代码包含子元素垂直居中.水平居中.居中三种情况 <html> <head> <style type=&qu ...
css布局之弹性布局flex
1. 弹性布局作用作用:弹性布局flex能按照我们的设置自动计算各子元素之间的间距并将之布局好,而不需要像定位那样手动计算布局. 2.弹性布局的定义和属性弹性布局是定义在一个父容器中,加上disp ...
使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
弹性布局(Flex布局)
弹性布局(Flex布局) 文章目录弹性布局(Flex布局) 绪论 Flex布局是什么? Flex布局的基本概念 Flex容器的属性以下六个属性设置在Flex容器上 flex-direction属性 ...
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性示例含义 column-count column-count: 3; 将元素内部分割成3 ...

CSS 弹性布局（flex）的height计算

疑惑现象：

可能过程：

测试代码：

博文引用-启发：

其他：

CSS 弹性布局（flex）的height计算相关推荐

最新文章

热门文章