Как сделать так, чтобы div во flexbox появился в следующей строке? - PullRequest
Новая
       2

Как сделать так, чтобы div во flexbox появился в следующей строке?

0 голосов
/ 11 апреля 2019

Я хочу, чтобы div в контейнере flexbox отображался в следующей строке.

У меня есть ящик div и внутри него есть детали div. в деталях div я хочу, чтобы элементы SVG и span были в одной строке. Если элемент span имеет текст более чем на одну строку, он должен помещаться на следующей строке, а элемент div после элемента span всегда должен быть ниже элемента span и центрироваться в элементе списка (независимо от того, имеет ли элемент span текст один или несколько строк) .

Что-то вроде ниже. enter image description here

Ниже приведен код, 

.drawer {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 392px;
    top: 55px;
    right: 8px;
    min-height: 40%;
    max-height: 450px;
    margin-left: 16px;

    &::after {
        content: " ";
        position: absolute;
        bottom: 100%;
        left: 83%;
        margin-left: -5px;
        border-width: 14px;
        border-style: solid;
    }
}

.item {
    display: flex;
    flex-direction: row;
    font-size: 12px;
    padding: 8px;
    min-height: 49px;
    li {
        list-style: none;
    }
    .details {
        display: flex;
        flex-grow: 1;
        color: #333;
        margin-right: 4px;
     }
 }
<div class="drawer">
    <ul>
        <li class="item">
            <div class="details">
                <svg/>
                <span>sometext</span>
                <div>
                    <div/><img/>
                </div>
             </div>
        </li>
    </ul>
</div>

Может ли кто-нибудь помочь мне решить эту проблему? Спасибо.

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

Ваша структура содержит слишком много стилей, в которых я не был уверен, посмотрев на ваши требования (png прилагается).Я добавил простую структуру, соответствующую вашим требованиям, пожалуйста, посмотрите, имеет ли это смысл.В случае, если вы хотите что-то, пожалуйста, верните 

.drawer {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 392px;
  top: 55px;
  left: 8px;
  min-height: 40%;
  max-height: 450px;
  margin-left: 16px;
}

svg {
  border: solid 1px;
}

.drawer::after {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 83%;
  margin-left: -5px;
  border-width: 14px;
  border-style: solid;
}

.item {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  padding: 8px;
  min-height: 49px;
}

.item {
  list-style: none;
  border-bottom: solid 1px;
}

.item .details {
  color: #333;
  margin-right: 4px;
}

.media {
  display: flex;
  align-items: flex-start;
}

.media-body {
  flex: 1;
}
<body>
  <div class="drawer">
    <ul>
      <li class="item">
        <div class="media">
          <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
          <div class="media-body" style="margin-left:20px;">

            <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
              in faucibus. </p>
            <p style="text-align:center;"> Center align Text </p>
          </div>
        </div>
      </li>
       <li class="item">
        <div class="media">
          <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
          <div class="media-body" style="margin-left:20px;">

            <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
              in faucibus. </p>
            <p style="text-align:center;"> Center align Text </p>
          </div>
        </div>
      </li>
       <li class="item">
        <div class="media">
          <svg class="bd-placeholder-img mr-3" width="64" height="64" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 64x64"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">64x64</text></svg>
          <div class="media-body" style="margin-left:20px;">

            <p> Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
              in faucibus. </p>
            <p style="text-align:center;"> Center align Text </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>
0 голосов
/ 11 апреля 2019

Текст ниже будет центрирован больше контента сверху 

.drawer {
  display: flex;
  flex-direction: row;
}

.drawer_icon {
  width: 60px;
  height: 60px;
  background: palevioletred;
  margin-right: 16px;
}

p {
  text-align: center;
}
<div class="drawer">
  <div class="drawer_icon"></div>
  <div>
    <span>Some Text</span>
    <p>Centered text</p>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...