display: block
属性可防止 justify-content
产生影响。
不妨尝试将 display
设为除 block
之外的某个值。
align-content也是用于flex布局的,但是 所谓的对于单行的弹性盒模型无效,指的是该弹性盒模型使用了flex-wrap:nowrap属性。
这句话的意思很简单:就是, align-content生效与否取决于flex-wrap:nowrap属性,而非页面上看到的单行
flex-wrap的默认值是nowrap
<main>
<div></div>
</main>
<style>
main{
display: flex;
align-content: center;/*使用align-content属性*/
justify-content: center;/*使用justify-content属性*/
flex-wrap: wrap;/*关键*/
border: 1px solid lawngreen;
}
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/161195.html