Как выровнять правильно, когда срабатывает flex-wrap, но в противном случае выровнять пространство между содержимым?

Я искал ответ, но не знаю, как кратко написать свой вопрос, чтобы найти ответы. Пока я ничего не нашел.

Вот ситуация:

На большом экране хотелось бы так:

edge| [CONTENT A] ... space ... [CONTENT B] |edge

Я достиг этого, используя justify-content: space-between.

Однако, когда размер окна уменьшается, содержимое становится:

edge| [CONTENT A] ... space ... |edge
edge| [CONTENT B] ... space ... |edge

(Я использую flex-wrap: wrap)

Но я бы хотел

edge| ... space ... [CONTENT A] |edge
edge| ... space ... [CONTENT B] |edge

Я пробовал с width: 100% ; text-align: right, но тогда на большом экране содержимое выглядит по центру, так как content A сдвинут вправо.
Я пробовал margin-left: auto, и он дает тот же визуальный эффект: работает на маленьком экране, но content A выглядит по центру на большой ширине.
Я пробовал align-items: flex-end; align-content: flex-end, но ничего не получается.
Я пробовал align-self: flex-end, но это тоже ничего не дает.

Какие-либо предложения ? Спасибо.

Пожалуйста, предоставьте воспроизводимый пример, использовали ли вы медиа-запросы css, чтобы иметь разные css на небольших экранах?

— 23.12.2020 12:44

Содержимое может изменять размер. Это текст, который движется. Использование медиа-запроса будет крайне болезненным и ненадежным

— 23.12.2020 12:53

html css flexbox

23.12.2020 12:35

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

923

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

Ответы 1

Ответ принят как подходящий

row-reverse wrap-reverse может это сделать

.box {
  display:flex;
  justify-content:space-between;
  flex-flow: row-reverse wrap-reverse;
  /* OR
     flex-direction: row-reverse;
     flex-wrap: wrap-reverse;
  */
  
  /* to illustrate */
  overflow:hidden;
  resize:horizontal;
  padding:10px;
  border:1px solid;
  /**/
}

.box > div {
  padding:10px 30px;
  border:1px solid blue;
} 

.box > div:first-child {
  order:1; /* to rectify the order swapped by row-reverse */
}

<div class = "box">
<div>some text A</div>
<div>some text B</div>
</div>

Ух ты ! Это блестяще! Я даже не знал, что wrap-reverse существует, и я бы никогда не подумал использовать его в сочетании с row-reverse при реверсировании моего DOM. Это безумие ха-ха. Большое спасибо !

— 23.12.2020 12:57

23.12.2020 12:50