大家好，又见面了，我是你们的朋友全栈君。
####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 两列等高
.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.net/137947.html原文链接：https://javaforall.net
