关于flex布局的疑问

Question

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

给form元素加上flex以后

Answer 1

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

首先，我们在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节点的文档，看完就会明白啦~~

Answer 2

你是#app设置的flex，只对form起作用，不会对label起作用。

是这个效果吗？

Answer 3

html

<div id="app">
    <form id="form" action="">
        <lebel><input type="text" /></lebel>
        <lebel><input type="text" /></lebel>
        <button id="btn" type="submit">submit</button>
    </form>
</div>

css

#app {
    display: flex;
    justify-content: center;
    height: 100%;
}

#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

效果图

Answer 4

给#app加个css属性:

    flex-direction: column

Answer 5

你敢不敢把你<br>标签给去掉。。。，样式中这么写，如下：

#app {
    display: flex;
    justify-content: center;
    height: 100%;
}

#form {
    display: flex;
    flex-flow;column nowrap;//改变排列方向
    justify-content: center;
    align-items: center;
}