css flex 文字右对齐,flex布局多个子元素如何既有左对齐也有右对齐

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，不做赘述。