Достижение «justify-content: space-between» в React для Flexbox, Grid и Inline-Block

space-between» — это свойство CSS, используемое в React и других средах веб-разработки для определения того, как гибкие элементы распределяются вдоль главной оси контейнера. Оно создает одинаковое расстояние между элементами, раздвигая их как можно дальше друг от друга. без пробелов в начале и конце.

space-between” в React:

  1. Использование Flexbox:
    • Примените свойство CSS «display: flex» к элементу контейнера.

      • space-between” в элементе контейнера.

Пример:

‘space-between’ }}>

Элемент 1

Элемент 2

Элемент 3

  1. Использование сетки:
    • Примените свойство CSS «display:grid» к элементу-контейнеру.
    • Установите для параметра «grid-template-columns» значение «1fr auto 1fr», чтобы создать три равных столбца, при этом средний столбец будет занимать доступное пространство.
    • Отрегулируйте ширину столбцов по мере необходимости.

Пример:

<div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr' }}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
  1. Использование встроенного блока:
    • Примените свойство CSS «text-align: justify» к элементу-контейнеру.
    • Установите для элементов элемента «display: inline-block» и «width: auto».
    • Добавьте дополнительный невидимый элемент после последнего элемента, чтобы создать интервал.

Пример:

<div style={{ textAlign: 'justify' }}>
  <div style={{ display: 'inline-block', width: 'auto' }}>Item 1</div>
  <div style={{ display: 'inline-block', width: 'auto' }}>Item 2</div>
  <div style={{ display: 'inline-block', width: 'auto' }}>Item 3</div>
  <div style={{ display: 'inline-block', width: '100%' }}></div>
</div>