css - 关于flex布局的疑问

问题描述

问 题

各位大佬，在使用flex box 布局的时候，这样写。为什么只有水平居中而不能竖直居中？

给form元素加上flex以后

解决方案

研究了一下这个问题。我详细说下吧，给各位同学讲讲：

首先，我们在HTML中搞几个dom，结构如下：

<div id="app">
        <input placeholder="name" name="name" id="inputName" class="animated fadeInDown">
        <input placeholder="mail" name="mail" id="inputMail" class="animated fadeInDown">
        <button class="animated fadeInDown" id="btn" type="submit">submit</button>
</div>

然后我们使用flex布局来搞一下，按照网上的教程，基本都是这么个套路：

#app {
            display: flex;
            justify-content: center;
            align-items: center;
        }

其中justify-content和align-items这两个属性是flex的关键属性，它俩掌管页面上X/Y轴的对齐方式（文档中叫做main-axis和cross-axis）具体大家可以搜索查看。

理论上来说，当我们完成这样的DOM结构和CSS样式表以后，我们的两个input就应该在打开的页面当中实现水平以及垂直居中。

但实际上，我们的页面中的实际显示是俩input框会贴在页面的顶部并水平居中，只是水平居中，并没有垂直居中。

在我看了大家的回答和自己的研究之后，这个问题的关键点在于：

<div id=""app>
    ...
</div>

这个DOM结构成了body的子节点，但是在DOM文档结构中，我们的body 并没有指定的height和width，所以整个文档流默认了这个DOM节点成了整个容器。因此，在这个页面里，id="app"的节点就是整个容器了。

所以，在我看来flex布局的方式，需要给容器指定一个固定的高度，或者给最外层的容器指定一个高度。

另外，如果有同学还是没明白的，建议可以看看MDN上关于DOM节点的文档，看完就会明白啦~~

这篇关于css - 关于flex布局的疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！