Блог

Главная - Вопросы по программированию - Как отобразить список элементов справа с помощью flexbox?

Как отобразить список элементов справа с помощью flexbox?

#html #css #flexbox

Вопрос:

Как я могу выровнять список элементов в правой части в виде списка с помощью flexbox?

что-то вроде этого?

введите описание изображения здесь

 p {
  display: flex;
  justify-content: space-between;
} 
 <p>
  <span>List</span>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
</p>

Ответ №1:

Вам нужно разделить эти два элемента.

Что-то вроде этого:

 .list {
  display: flex;
  justify-content: space-between;
} 
 <div class="list">
<div>      
<span>List</span>
</div>
<div>
  <div>3 oranges</div>
  <div>4 apples</div>
  <div>6 bananas</div>
</div>
</div>

Комментарии:

1. Обратите внимание, что <div> первое <span> не является строго необходимым, но, вероятно, желательно.

2. да, вы правы. Это «выглядит» лучше 🙂

Ответ №2:

  1. Сгруппируйте последние три <span> в <p>
  2. Заверните первый <span> и <p> в <div>

🎁

Используйте семантические элементы: p для абзацев / текста.

1 — justify-content: space-between;

Добавьте пространство между двумя дочерними элементами <div> . Следовательно, первое <span> и второе <p> отодвигаются в стороны.

 div {
  display: flex;
  justify-content: space-between;
}

p {
  display: flex;
  flex-direction: column;

} 
 <div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

Я бы использовал первый подход.

2 — margin-left: auto;

Толкает <p> вправо.

 div {
  display: flex;
}

p {
  display: flex;
  flex-direction: column;
  margin-left: auto;
} 
 <div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

3 margin-right: auto;

Толкает <p> вправо.

 div {
  display: flex;
}

div > span {
  margin-right: auto;
} 

p {
  display: flex;
  flex-direction: column;
  
} 
 <div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

4 — flex-grow: 1;

Первый <span> занимает столько места, сколько доступно. Следовательно, <p> отодвигается вправо.

 div {
  display: flex;
}

div > span {
  flex-grow: 1;
}

p {
  display: flex;
  flex-direction: column;
} 
 <div>
  <span>List</span>
  <p>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </p>
</div>

Ответ №3:

 <div class="list">
  <span>List</span>
  <div>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
  </div>

.list {
  display: flex;
  flex-direction:row;
  justify-content: space-between;
}
.list div{
  display:flex;
  flex-direction:column;
}

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

Ответ №4:

Это должно сработать

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

.cont div {
    display: flex;
    flex-direction: column;
} 
 <div class="cont">
  <div>
    <span>List</span>
  </div>
  <div>
    <span>3 oranges</span>
    <span>4 apples</span>
    <span>6 bananas</span>
  </div>
</div>

Ответ №5:

Без изменения структуры HTML вы можете сделать, как показано ниже:

 p {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
}

p span:nth-child(n   3) {
  width:100%;
  text-align:right;
} 
 <p>
  <span>List</span>
  <span>3 oranges</span>
  <span>4 apples</span>
  <span>6 bananas</span>
</p>
Метки: