开发者社区云计算文章正文

display: block 属性影响flex布局

2023-08-11 220

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： display: block 属性影响flex布局

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>