Вертикальный padding между контейнерами?

Question

[formasters777]

Есть секция - слева фото, с правой стороны текстовый блок.
Существует ли способ менять padding или spacing={5} в React MUI без использования дополнительного javascript для контроля ширины экрана,
Но, и в обычном сss насколько понимаю таких способов нет, или флексбоксы и гриды на это способны?
Что обычно делают в таких случаях, например сдвигают точку медиа правила, или создают дополнительную точку для конкретно этого компонента?

Answer 1

[modelair]

есть такое свойство у flexbox - gap.

.flex {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

там уж заверните во что хотите.

Comments

[formasters777]

Да, я прочитал, что это свойство появилось в 2021.
Я пока остановился на таком варианте.
Наверно, в его основе лежит отрицательный margin, но в MUI и др. библиотеках всё по своему сделано.

<Box sx={{ width: '100%' }}>
      <Grid container rowSpacing={{ xs: 10, sm: 20, md: 30 }} >
        <Grid item xs={6} >
          <Item sx={{border:"1px solid black"}}>1</Item>
        </Grid>
        <Grid item xs={6}>
          <Item sx={{border:"1px solid black"}}>2</Item>
        </Grid>
        <Grid item xs={6}>
          <Item sx={{border:"1px solid black"}}>3</Item>
        </Grid>
        <Grid item xs={6}>
          <Item sx={{border:"1px solid black"}}>4</Item>
        </Grid>
      </Grid>
    </Box>

Хотя у них есть вариант gap и на гридах:

<Box sx={{ width: 1 }}>
      <Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={10}>
        <Box gridColumn="span 8">
          <Item>xs=8</Item>
        </Box>
        <Box gridColumn="span 4">
          <Item>xs=4</Item>
        </Box>
        <Box gridColumn="span 4">
          <Item>xs=4</Item>
        </Box>
        <Box gridColumn="span 8">
          <Item>xs=8</Item>
        </Box>
      </Box>
    </Box>

[modelair]

formasters777, если вы заглянете под капот(в собранный код), то увидите что это всё и есть gap

[formasters777]

Я смотрел базовый вариант с rowSpacing, в devtools ничего такого не видел, но до этого прочёл, что до gap использовали отрицательный margin.
Или Вы имели ввиду node_modules?
.flex-container {
display: flex;
flex-wrap;
margin: -40px -20px;
}
.flex-item {
margin: 40px 20px;
}

[Ankhena]

modelair,

Свойство может быть и вертикальным и горизонтальным - зависит от flex-direction

Не зависит оно от flex-direction.
И row-gap (для флексов) имеет проблемы в даже не очень старых сафари.

[modelair]

Ankhena, конечно зависит, просто косвенно.

[modelair]

Ankhena, ну а про row-gap речи вообще не шло

[Ankhena]

modelair,

конечно зависит, просто косвенно.

Можно поподробнее, пожалуйста?

ну а про row-gap речи вообще не шло

На скрине есть стрелочки, показывающие и вертикальный отступ.

[modelair]

Ankhena, да вы и так знаете. gap становится вертикальным при fd: column и горизонтальным соотвественно при row. ну и на скрине это и показано

[Ankhena]

modelair,

да вы и так знаете. gap становится вертикальным при fd: column и горизонтальным соотвественно при row.

Так как раз нет.
gap не поворачивается в зависимости от направления главной оси. Я написала именно об этом.
https://codepen.io/AnnaSummer/pen/QWZpomy

[modelair]

Ankhena, сдаюсь, не всё о свойстве знал