html,body { height: 100%; } body { font-family: sans-serif; } .container { padding: 20px; height: 100%; display: flex; flex-direction: column; flex-grow: 1; }
<div class="container"> <h3>Title</h3> <hr/> <div class="content"> <p>This is some content</p> </div> </div>
查看this pen.
这种行为在Firefox和Chrome上得到证实.我没有找到任何解释.我该怎么解决?
解决方法
hr
element,预计将以这种风格呈现:
hr { color: gray; border-style: inset; border-width: 1px; margin: 0.5em auto; }
具体来说,请注意margin-left:auto,margin-right:auto.
这些样式用于水平居中的块元素.根据Calculating widths and margins – Block
If both
margin-left
andmargin-right
areauto
,their used values
are equal. This horizontally centers the element with respect to the
edges of the containing block.
在块布局中,如果块具有明确的宽度,则该效果才会显着,否则块将增长以覆盖其所有包含的块.
在FlexBox中,它类似:默认的align-self: auto
和align-items: stretch
使Flex项目增长,以覆盖交叉轴上的Flex线(列布局中的水平线)和auto
margins can also be used to center.
然而,有很大的区别:根据Cross Size Determination,align-self:stretch不会影响具有自动边距的flex项目:
If a flex item has 07006,its computed cross size
property isauto
,and neither of its cross-axis margins areauto
,
the used outer cross size is the used cross size of its flex line,
clamped according to the item’s min and max cross size properties.
Otherwise,the used cross size is the item’s 07007.
hr { margin-left: 0; margin-right: 0; }
.container { padding: 20px; display: flex; flex-direction: column; } hr { margin-left: 0; margin-right: 0; }
<div class="container"> <h3>Title</h3> <hr /> <div class="content"> <p>This is some content</p> </div> </div>
或者,通过宽度或最小宽度强制一定宽度将抵消由自动边缘引起的收缩(更技术上,缺乏拉伸).
原文地址:https://www.jb51.cc/css/214670.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。