Flex абзац занимает больше места на правом краю, когда в нем несколько строк или длинных слов, а не одна строка - PullRequest
0 голосов
/ 30 августа 2018

В приложении, с которым я работаю, есть фрагмент кода HTML, стилизованный с использованием flex, который присутствует в нескольких местах для визуализации нескольких всплывающих сообщений. Сообщения имеют значок закрытия в правом верхнем углу.

Однако, в зависимости от длины сообщения в элементе <p>, расстояние между текстом и значком закрытия изменяется. Например, если текст состоит из нескольких строк или длинных слов, элемент <p> занимает больше места, расстояние между текстом и значком закрытия увеличивается, и я не могу понять, почему.

Пример короткого текста

Пример длинного текста

Как обеспечить равномерное расстояние между ними?

<div style="display:flex; align-content:stretch;" id="aProductDraftUpdating>
   <p style="margin: 0px; flex:1 1 auto">
      "Editing the product draft continues from the last altered step. 
       Editing the product draft continues from the last altered step."
   </p>
   <i class="icons iconClose" role="link" style="flex:1 1 auto;" onClick="methodThatRemovesTheMessage(aProductDraftUpdating)">
      ::before
   </i>
</div>

1 Ответ

0 голосов
/ 30 августа 2018

Вы можете использовать position: absolute, чтобы разместить значок закрытия и добавить paddind справа от окна предупреждения. Вот пример:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.alert {
  position: relative;
  background: #ffffb7;
  padding: 5px 50px 5px 10px;
  z-index: 1;
  margin-bottom: -10px;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
}

.alert i {
  position: absolute;
  right: 20px;
}

.container {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="alert">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus dolor magna, a consequat enim fringilla vitae.</p>
  <i class="fas fa-times"></i>
</div>
<div class="container">
  
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...