flex 垂直居中

#parent {

display:flex;

width:300px;

height:300px;

outline:solid 1px;

justify-content:center;

align-content:center; //主軸居中對(duì)齊

align-items:center;//交叉軸的中點(diǎn)對(duì)齊

}

#child {

width:100px;

height:100px;

outline:solid 1px;

}

flex 兩列等高

hahjdjjajdES6提供的Proxy可以讓JS開(kāi)發(fā)者很方便的使用代理模式，聽(tīng)說(shuō)Vue

.parent{

width: 300px;

display: flex;

align-content: center;

justify-content: center;

align-items: stretch;

}

.child{

width: 100px;

outline: solid 1px;

}

align-items：交叉軸的對(duì)齊方式

flex-start：交叉軸的起點(diǎn)對(duì)齊。

flex-end：交叉軸的終點(diǎn)對(duì)齊。

center：交叉軸的中點(diǎn)對(duì)齊。

baseline: 項(xiàng)目的第一行文字的基線對(duì)齊。

stretch(默認(rèn)值)：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

flex 自適應(yīng)寬

.child1 {

width:100px;

background-color:lightblue;

}

.child2 {

width:100px;

flex:1;

outline:solid 1px;

}

flex:1是flex-grow,flex-shrink,flex-basis的縮寫(xiě)

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。