flex vue 垂直居中居上_flex 垂直居中、两列对齐、自适应宽[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

####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，即项目的本来大小。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137947.html原文链接：https://javaforall.cn