flex 垂直居中

#parent {

display:flex;

width:300px;

height:300px;

outline:solid 1px;

justify-content:center;

align-content:center; //主軸居中對齊

align-items:center;//交叉軸的中點對齊

}

#child {

width:100px;

height:100px;

outline:solid 1px;

}

flex 兩列等高

hahjdjjajdES6提供的Proxy可以讓JS開發者很方便的使用代理模式，聽說Vue

.parent{

width: 300px;

display: flex;

align-content: center;

justify-content: center;

align-items: stretch;

}

.child{

width: 100px;

outline: solid 1px;

}

align-items：交叉軸的對齊方式

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 項目的第一行文字的基線對齊。

stretch(默認值)：如果項目未設置高度或設為auto，將占滿整個容器的高度。

flex 自適應寬

.child1 {

width:100px;

background-color:lightblue;

}

.child2 {

width:100px;

flex:1;

outline:solid 1px;

}

flex:1是flex-grow,flex-shrink,flex-basis的縮寫

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

總結

以上是生活随笔為你收集整理的flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。