大佬教程收集整理的这篇文章主要介绍了html5 – 当第二个弹性项目引入时,Flex项目不会占用容器中的可用空间,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的代码:
html,body { width: 100%; height: 100%; } #container { display: flex; height: 100%; BACkground-color: blue; } .block { flex: 1; } #left { BACkground-color: green; } #center { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; } #right { BACkground-color: orange; } #canvasObject { display: block; margin: 0 auto; border: 1px solid; BACkground-color: yellow; }
<div id="container"> <div id="left" class="block">Left</div> <div id="center" class="block"> <canvas id="canvasObject">Your browser does not support Canvas.</canvas> <button type="button">Click!</button> </div> <div id="right" class="block">Right</div> </div>
如果我的代码中没有任何按钮,画布占据整个div,但是当我显示按钮时,画布似乎没有调整所需的高度.
> Example 1:没有按钮.
> Example 2.带按钮.
如何使canvas对象调整大小直到可用高度(也是宽度,但它已经在做了)?
提前致谢!
#center { display: flex; flex: 1; flex-wrap: wrap; align-content: flex-start; /* <-- source of the problem */ }
当容器中有多行时,align-content属性控制横轴中的flex项之间的间距.
当排除按钮元素时,flex容器中只有一行.在这种情况下,align-content没有效果(align-items可以工作).
但是当你添加按钮时,现在有两行换行,对齐内容接管(对齐项不起作用).
由于align-content在代码中设置为flex-start,因此两行都打包到容器的顶部. (对于其他选项,请尝试flex-end,center,space-between,space-around和stretch).
一个有效的解决方案是使用flex-direction:column并将flex:1应用于画布.
#center { display: flex; flex-direction: column; /* new; stack flex items vertically */ flex: 1; flex-wrap: wrap; /* align-content: flex-start; <-- remove; not necessary */ } #canvasObject { flex: 1; /* new; consume all available free space */ /* display: block; <-- remove; not necessary */ /* margin: 0 auto; <-- remove; not necessary */ border: 1px solid; BACkground-color: yellow; }
W3C参考文献:
> 8.4. Packing Flex Lines: the align-content
property
> 8.3. Cross-axis Alignment: the align-items
and align-self
properties
以上是大佬教程为你收集整理的html5 – 当第二个弹性项目引入时,Flex项目不会占用容器中的可用空间全部内容,希望文章能够帮你解决html5 – 当第二个弹性项目引入时,Flex项目不会占用容器中的可用空间所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。