[英]CSS display flex side effects
I have an existing page on which I am trying to add display:flex, flex-flow: column & height:99% to the container and adding flex:1 for the child items.我有一个现有页面,我试图在该页面上将 display:flex, flex-flow: column & height:99% 添加到容器并为子项添加 flex:1。
My question is since it is an existing page, I do not want to really touch any of the other styling on the page (mostly they have properties like overflow, margin/padding, etc)我的问题是因为它是一个现有页面,我不想真正触及页面上的任何其他样式(大多数情况下它们具有溢出、边距/填充等属性)
Can there be any side effects that I should watch out for after making the container to display: flex?在使容器显示为 flex 后,我是否应该注意任何副作用?
Here are two potential side effects to consider:以下是需要考虑的两个潜在副作用:
Margin collapsing, which is a feature in a block formatting context , doesn't exist in a flex formatting context .边距折叠是块格式上下文中的一个功能,在flex 格式上下文中不存在。 See: Margin collapsing in flexbox
请参阅: 弹性盒中的边距折叠
Since you plan to set a percentage height ( height: 99%
) on the container, make sure the parent has a defined height.由于您计划在容器上设置百分比高度 (
height: 99%
),请确保父级具有定义的高度。 See: Working with the CSS height
property and percentage values请参阅:使用 CSS
height
属性和百分比值
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.