Как разместить два элемента рядом друг с другом внутри flexbox?

Question

Я хочу разместить два элемента внутри div flexbox рядом друг с другом.

Что я пытаюсь сделать?

У меня есть flexbox с боковым выдвижным ящиком, в котором есть элементы списка.каждый элемент списка имеет div flexbox, который содержит svg, элемент span и отметку времени

Я хочу, чтобы этот элемент svg и span и отметка времени оставались в одной строке, если содержимое диапазона превышает ширину, которое следует переместить на следующую строку, не нажимаяотметка времени следующей строки.

Таким образом, каждый элемент списка должен быть таким же, как на картинке выше ...

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

<div class="drawer">
    <header>
    </header>
    <ul>
        <li>
            <div class="list_item">
                <div class="details">
                    <svg>
                    <span>somettttttttttttttttttttttt</span>
                </div>
                <timestamp/>
             </div>
        </li>
   </ul>
</div>

.drawer {
     display: flex;
     flex-direction: column;
     position: absolute;
     width: 320px;
     top: 55px;
     right: 18px;
     min-height: 40%;
     max-height: 80%;
     overflow: scroll;
     overflow-x: hidden;


     header {
         min-height: 38px;
         border-bottom: 1px solid #CCCCCC;
         display: flex;
         align-items: center;
         justify-content: space-between;
         padding-right: 0px;
         padding-top: 2px;
    }}


.list_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px;

    svg {
        margin-right: 6px;
    }

   .details {
        flex-grow: 1;
        align-items: center;

   }}

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

Answer 1

Вы также можете использовать flexbox для своих вещей. затем сделайте его justify-content: flex-start и задайте для поля времени отметку left: auto.

.item{
  display: flex;
  align-items: flex-start;
  justify-content:flex-start;
  border: 1px solid #888888;
  margin: 0 0 10px 0;
  padding : 4px;
  width: 200px;
  
}
.item .time{
  margin-left: auto;
}
.item .icon{
  margin: 0 8px 0 0;
}
.item p {
  margin:0;
}

<div class="list">
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum ipsum ipsum</p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
  <div class="item">
  <span class="icon">&#x2665;</span>
  <p>Lorem ipsum </p>
  <span class="time">12:45</span>
</div>
</div>

Answer 2

Обратите внимание, что свойства flex работают только с дочерними элементами прямого flex:

• вы можете сделать свой details div также flexbox (может быть, вы можете удалить align-items: center из ваших flexbox, напримерниже)

• добавьте break-word: break-all к span, чтобы разбить текст, если недостаточно места в одной строке

• при желании вы можете иметьflex: 0 0 auto на svg для сохранения авто размеров svg

См. Упрощенную демонстрацию ниже:

.drawer {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 320px;
  top: 55px;
  right: 18px;
  min-height: 40%;
  max-height: 80%;
  overflow: scroll;
  overflow-x: hidden;
}

header {
  min-height: 38px;
  border-bottom: 1px solid #CCCCCC;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0px;
  padding-top: 2px;
}

.list_item {
  display: flex;
  flex-direction: row;
  /*align-items: center;*/
  padding: 4px;
}

svg {
  margin-right: 6px;
  background: aliceblue;
  flex: 0 0 auto; /* take auto width, don't shrink or grow */
}

.details {
  display: flex; /* added */
  flex-grow: 1;
  /*align-items: center;*/
}

li {
  list-style: none;
}

.details span {
  word-break: break-all; /* added */
}

<div class="drawer">
  <header></header>
  <ul>
    <li>
      <div class="list_item">
        <div class="details">
          <svg height="20" width="50">
  <text x="0" y="15" fill="red">SVG</text>
</svg>
          <span>sometttttttttttttttttttttttttttttttttttttttttttttt</span>
        </div>
        <div>00:00</div>
      </div>
    </li>
    <li>
      <div class="list_item">
        <div class="details">
          <svg height="20" width="50">
  <text x="0" y="15" fill="red">SVG</text>
</svg>
          <span>somettttttttttttttttttttttt</span>
        </div>
        <div>00:00</div>
      </div>
    </li>
    <li>
      <div class="list_item">
        <div class="details">
          <svg height="20" width="50">
  <text x="0" y="15" fill="red">SVG</text>
</svg>
          <span>somettttttttttttttttttttttt</span>
        </div>
        <div>00:00</div>
      </div>
    </li>
  </ul>
</div>