大家好,又见面了,我是你们的朋友全栈君。
####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,即项目的本来大小。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137947.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...