垂直堆叠 li 内的 div - flexbox答案

【问题标题】：Stack divs within li vertically - flexbox垂直堆叠 li 内的 div - flexbox
【发布时间】：2020-11-29 09:25:15
【问题描述】：

我的结构如下：

 <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`,
  },
}));

将 flex-direction: 列添加到 statsItem 时

【问题讨论】：

既然你添加了flex-direction: column，那么你需要再添加一个justify-content: center进行垂直对齐

标签： html css flexbox material-ui

【解决方案1】：

.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>

【讨论】：

【解决方案2】：

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

Flexbox，当按照规范指南实施时，默认为flex-direction: row。

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

Force flex item to span full row width

【讨论】：

啊，打败我！