两栏布局是学习样式中最常见的一种布局方式，也是面试的考点，在开发中无疑也会经常遇到

开发中我们经常会遇到一些列表，左边文字右边箭头，

比如下面三栏布局

盒子④ =》A => ①+②+③

盒子① =》B

盒子② =》C

盒子③ =》D

这种两栏布局的实现方式很多，在社区也提问过，

（请教两列布局样式问题？）

https://developers.weixin.qq.com/community/develop/doc/0000e460b40f00326bf945c9056000

该帖子给出了两种实现方式，其实如果放在前几年，这种两栏布局多半会用浮动来实现

占位

本文采用帖子中第一种实现方式，额外做些改动，具体代码如下

A{
    background-color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1rpx solid #ebebeb;
    height: 45px;
    text-align: left;
}
B{
    background-color: #1bcfad;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;


}
C{
    padding-left: 5px;
    flex-grow: 8;
}
D{
    flex-grow: 1;
    padding-right: 5px;
    color: #B2B2B2;
    text-align: right;
}

在这里主要用到flex布局子元素中的flex-grow，在之前开发中，flex布局主要还是设置在父元素上的，但是这次第一次用到flex-grow，大家可以学习参考下

占位