Отрегулируйте интервал вокруг абзаца (внутри блока div) так, чтобы расстояние между блоками div справа и слева всегда было равным с обеих сторон.

Question

У меня есть три блока div, выровненных по одной строке как столбцы, с использованием контейнера flex.

Первый и третий столбцы имеют небольшой объем текста в каждом, средний столбец имеет большой абзац .

Что я хотел бы сделать, так это выровнять текст в среднем div так, чтобы пространство между ним и первым и третьим div всегда было одинаковым, даже когда ширина страницы изменяется и слова переносить на следующую строку.

По умолчанию поведение переноса слов означает, что вы можете получить много пробелов справа от div, что не равно пробелам слева (потому что разной длины слов). Как сделать так, чтобы интервал изменялся на основе самого длинного слова (я предполагаю, что это самое длинное слово), чтобы оно всегда было равно?

Вот пример кода:

.container {
  display: flex;
}

<div class="container">

  <div class="column1">
    <p>
      Some content
    </p>
  </div>

  <div class="column2">
    <p>
      There is more content in this div than the other divs. Blah, blah, blah, blah, blah, blah...
    </p>
  </div>

  <div class="column3">
    <p>
      Some content
    </p>
  </div>

</div>

Если вы расширяете и уменьшаете окно, вы можете видеть, что по мере приближения слов в среднем столбце к переносу интервалы не равны с обеих сторон div; справа меньше места, чем слева. Это то, что я хотел бы решить, поэтому интервалы между div всегда равны.

Answer 1

Не существует полностью удовлетворительного решения для того, что вы описываете. justify-content: space-between на контейнере - самое близкое из возможных. Или вы используете justify-content: space-around - возможно, это ближе к тому, к чему вы стремитесь (трудно сказать из вашего описания ...):

.container {
  display: flex;
  justify-content: space-around;
}

<div class="container">

  <div class="column1">
    <p>
      Some content
    </p>
  </div>

  <div class="column2">
    <p>
      There is more content in this div than the other divs. Blah, blah, blah, blah, blah, blah...
    </p>
  </div>

  <div class="column3">
    <p>
      Some content
    </p>
  </div>

</div>

Answer 2

.container {
    display: flex;
    justify-content: space-between;
}

Answer 3

Пожалуйста, запустите фрагмент кода, чтобы убедиться, что это ваш желаемый результат.

.container {
  display: flex;
}

.container div p {
  text-align: justify;
  text-justify: inter-word;
}

<div class="container">

  <div class="column1">
    <p>
      Some content
    </p>
  </div>

  <div class="column2">
    <p>
      There is more content in this div than the other divs. Blah, blah, blah, blah, blah, blah...
    </p>
  </div>

  <div class="column3">
    <p>
      Some content
    </p>
  </div>

</div>

Answer 4

Я думаю, что вы можете указать определенный размер для div и затем выровнять текст для ларги