Stack divs within li vertically - flexbox

Question

My structure is as below:

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

What I a trying to achieve

What it is right now

I tried using flex-direction column however it doesn't suit me

My css code:

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

When adding flex-direction: column to statsItem

since you added `flex-direction: column`, then you need to add another `justify-content: center` for vertical alignment — s.kuznetsov, Aug 09 '20 at 17:53

Michael Benjamin · Accepted Answer · 2020-08-09T17:05:54.780

3

Add flex-direction: column to the statsItem elements.

Flexbox, when implemented in accordance with spec guidelines, defaults to flex-direction: row.

Alternatively, you can keep the row direction, adding wrap to the container and flex-basis: 100% to the children, forcing each child to exist in their own row.

Force flex item to span full row width

edited Aug 09 '20 at 17:05

answered Aug 09 '20 at 17:02

Michael Benjamin

346,931
104
581
701

Ah, beat me to it! – kvncnls Aug 09 '20 at 17:05

score 0 · Answer 2 · answered Aug 09 '20 at 17:08

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

Stack divs within li vertically - flexbox

2 Answers2