flex布局第⼆⾏数据两侧对齐问题问题描述
使⽤flex布局时经常会遇到这种情况
第⼆⾏只有两个数据，导致两侧对齐了。⽽我们预期的⼀般是这样⼦的
如何解决？
:after伪元素的妙⽤，在元素之后添加内容。
.instance-card-bottom{ display: flex;
justify-content: space-between; flex-wrap: wrap;
padding: 10px 10px; background: #f2f2f2;
// 这⾥使⽤伪元素
&::after{
content:'';
width: 400px;
}
.work-flow{
display: flex;
flex布局对齐方式flex-direction: column;
justify-content: space-between; margin-top: 10px;
width: 400px;
height: 170px;
padding: 20px; background: #fff;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。