flex布局实现自适应左右换行

需求

在header一行中， 有左右2个功能块， 左右排列， 当屏幕缩小时，右侧内容自适应的换行到左功能模块下方

分析

考虑用到flex布局+ antd解决

解决

<Row className={s.responseRow}>
    <Col className={s.l1}>
        <div>
        内容1
        </div>
    </Col>
    <Col className={s.l2}>
        内容2
    </Col>
</Row>

.responseRow {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    margin: -8px 0 0 -8px;
    flex-flow: row wrap;
    .l1 {
        display: flex;
        align-items: center;
        margin: 8px 0 0 8px;
    }
    .l2 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin: 8px 0 0 8px;
    }
}

演示效果