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

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

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

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

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

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

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

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

<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;

   }}

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

html css flexbox

07.04.2019 09:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

13 584

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

спасибо, но временная метка перемещается на следующую строку... пример временной метки "2019-04-03T04:53:39.368106+00:00"

— 07.04.2019 10:38

Хорошо, я добавил flex: 0 0 auto; к отметке времени, а также и работает.

— 07.04.2019 10:51

07.04.2019 09:47

Вы также можете использовать flexbox для своих элементов. затем сделайте его justify-content:flex-start и задайте margin-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>

07.04.2019 09:54

Другие вопросы по теме

Браузер переопределяет все элементы в моем коде и превращает их в ссылки

Шрифт отображается некорректно при разных масштабах и размерах дисплея

Проблемы с несколькими функциями фильтрации

Как стилизовать элемент textarea в столбце сетки?

Неупорядоченный список, который действует как плотная сетка с автоматическим потоком

Есть ли способ показать кнопку на основе свободного места в коробке, сделанной

Текст в пользовательских кнопках случайно не центрирован по вертикали

ScrollTo() и jquery scrollTop() не работают в Chrome

Как превратить элементы сетки div в ссылку и наложить изображение при наведении?

HTML и CSS - нельзя разделить меню и другие объекты

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

Ответы 2

Другие вопросы по теме

Похожие вопросы