Центрируйте гибкие элементы на упаковке
Я установил flexbox с двумя элементами, которые должны быть слева и справа на обычном экране.
Если экран недостаточно велик, чтобы показать оба рядом друг с другом, он должен быть перенесен, но тогда они должны быть центрированы, а не выровнены по левому краю.
Я пробовал разные решения (например, использованиеmargin: auto
на дочерние элементы), но это выровняло их больше к центру, даже когда в том же ряду.
Вот упрощенный пример:
.container {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid black;
margin-bottom: 25px;
}
.large {
width: 500px;
}
.small {
width: 175px;
}
.item {
width: 100px;
height: 100px;
background-color: blue;
margin: 25px 0px;
}
<div class="container large">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container small">
<div class="item"></div>
<div class="item"></div>
</div>
https://jsfiddle.net/SoWhy/zfx4ub8x/
Первый контейнер предназначен для позиционирования, второй контейнер эмулирует тот же контейнер на меньшем экране, обратите внимание на выравнивание по левому краю.
Есть ли способ определить, что flexbox должен по-разному выравнивать элементы при переносе, или я могу сделать это только с помощью метода "@media screen" (который требует от меня установки определенного размера и, следовательно, не является гибким, если размер элементов изменения)?