1.可以将1、4由另一个div包裹,再由这个div和1、3作为容器的项目进行space-between对齐
2.如果需要点击某一个项目,使其靠到左边或者右边,剩余的space-between对齐
可以构建一个div作为容器的第一个项目,这个项目中定义1、2、3、4这么四个子元素,他们的display设置为none。当点击外面相应数字的div时,将被点击的div的display设为none,将我们构建的div内的相应数字的div的display设为block即可。
方案1:
html部分
1
4
3
2
css部分
#container {
display:flex;
height:100px;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
border: 1px solid blue;
}
.items {
flex:1 1 0; //绝对项目2、3 相对于group的占比;绝对项目1、4相对彼此的占比
border:1px solid red;
}
#container > .items { //3、2两个项目的最大和最小尺寸相对于容器的百分比设置
min-width:10%;
max-width:20%;
}
.group {
display: flex;
flex-direction:row;
flex:2 2 0; //绝对项目group相对于2、3的占比
min-width:20%;
max-width:40%;
}
结果:
方案2:需要用到js,不做赘述。