在li内垂直堆叠div-flexbox

Question

我的结构如下：

 <ul className={classes.root}>
    <li className={classes.statsItem}>
      <div className={`${classes.span} ${classes.willGive}`}>₹0</div>
      <div className={classes.span}>You will give</div>
    </li>
    <li className={classes.statsItem}>
      <div className={`${classes.span} ${classes.willGet}`}>₹0</div>
      <div className={classes.span}>You will get</div>
    </li>
  </ul>

我试图实现的目标

现在是什么

我尝试使用flex-direction列，但是不适合我

我的CSS代码：

    const useStyles = makeStyles((theme) => ({
  root: {
    display: `${LAYOUT.FLEX}`,
    justifyContent: 'space-between',
    margin: '20px 16px',
    minHeight: '87px',
    borderRadius: '4px',
    border: `solid 1px ${COLORS.GREY}`,
    backgroundColor: `${COLORS.WHITE}`,
  },
  statsItem: {
    display: `${LAYOUT.FLEX}`,
    justifyContent: 'center',
    alignItems: 'center',
    flex: '1 1 auto',
    '&:not(:last-child):after': {
      content: 'close-quote',
      border: `0.5px solid ${COLORS.LIGHT_GREY}`,
      minHeight: '40px',
      margin: 'auto',
    },
  },
  span: {
    fontSize: `${PIXEL_SIZE['14px']}rem`,
    color: `${COLORS.TEXT_GREY}`,
  },
  willGive: {
    color: theme.palette.success.main,
    fontSize: `${1.41 * PIXEL_SIZE['14px']}rem`,
  },
  willGet: {
    color: theme.palette.error.main,
    fontSize: `${1.41 * PIXEL_SIZE['14px']}rem`,
  },
}));

在向flexs-direction：列添加statsItem时

Answer 1

将flex-direction: column添加到statsItem元素中。

Flexbox根据规范准则实施时，默认值为flex-direction: row。

或者，您可以保持row的方向，将wrap添加到容器中，将flex-basis: 100%添加到子级中，强制每个子级都存在于自己的行中。

• Force flex item to span full row width

Answer 2

.lis{
display:flex;
flex-direction:column;}

li{
display:inline-block;
margin-right:20px;}

 <ul className='container'}>
    <li className='lis'>
      <div> c₹0</div>
      <div>You will give</div>
    </li>
    <li className='lis'>
      <div>₹0</div>
      <div> will get</div>
    </li>
  </ul>