flex居中（justify-content: center和 align-items:center ）遇坑。

justify-content: center和 align-items:center

當你使用flex佈局時 會經常用到這兩個屬性但是有時會發現爲什麼失靈了，爲什麼怎麼樣都居中不了，明明剛纔還管用 ，（前幾天博主就遇到了這種情況）…

• 這個連個屬性在網上查到的都是說前者是水平居中後者是垂直居中 但是其實這種是不完全正確的只是其中一種情況，如果是另一種情況的話就會失效。
• 步入正題那現在應該怎麼使用呢？

話不多說上代碼：

/*父盒子*/
.testParent{
    width: 700px;
    height: 200px;
    display: flex;
    flex-direction: row; /*默認也是row可以不寫*/
    background-color: #428BCA;
    align-items: center;  /*這種情況是垂直居中*/
    justify-content: center;/*這種情況是水平居中*/

}
/*子盒子*/
.test{
    width: 100px;
    height: 50px;
    background-color: aqua;
}

這個時候他就是正常的 justify-content: center是水平居中
align-items:center垂直居中。

• 但是當我們使用 lex-direction:column;的時候卻發現怎麼失靈了。

.testParent{
    width: 700px;
    height: 200px;
    display: flex;
    flex-direction: column; /*這裏變成了column*/
    background-color: #428BCA;
    align-items: center;  /*這個時候這個變成了水平居中*/

}
/*子盒子*/
.test{
    width: 100px;
    height: 50px;
    background-color: aqua;
}

經過上面的演示總結出來他們的該怎麼使用

• 當你在父盒子中使用 flex-direction: column; 讓子元素 豎着排列時 這個時候想水平居中就是用 這個 align-items:center; 。垂直（縱向）居中就是用justify-content: center; 當父盒子 flex-direction: row;（默認的）則反之。
• 使用這兩個屬性還有一個前提那就是父盒子的寬度和高度得有，這個時候或許有人會有疑惑，我以前沒指定過爲什麼也能用，原因是子盒子指定了把父盒子的給撐開了，但是如果是垂直方向上可能就會有問題，比如你想讓一個盒子在一個頁面的正中間，這個時候你就需要把父盒子的高度設爲100%纔可以。