Я искал ответ, но не знаю, как кратко написать свой вопрос, чтобы найти ответы. Пока я ничего не нашел.
Вот ситуация:
На большом экране хотелось бы так:
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
, но это тоже ничего не дает.Какие-либо предложения ? Спасибо.
Содержимое может изменять размер. Это текст, который движется. Использование медиа-запроса будет крайне болезненным и ненадежным
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. Это безумие ха-ха. Большое спасибо !
Пожалуйста, предоставьте воспроизводимый пример, использовали ли вы медиа-запросы css, чтобы иметь разные css на небольших экранах?