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

Question

[Дмитрий Качуринец]

Песочница.

1) Сейчас у меня в верстке данный select находится справа:



Но когда ему мало места, то он опускается ниже:



Я хочу сделать так, чтобы когда ему не было места, он прижимался к левой стороне, а когда есть к правой.

2) Как выровнять данный фильтр по центру на мобильной версии? Пробовал разные свойства, но никак не получается.



3) Как вообще сделать адаптив на данной странице и как лучше позиционировать все эти блоки на меньших экранах?

Answer 1

[Ivan Sharapenkov]

1) Можно с помощью медиазапросов
2) Добавить к .filter,

width: 100%;
display: flex;
flex-direction: column;
align-items: center;

если надо чтобы было по центру только для мобильной версии, то тоже медиазапросы. Если что, то смешивать их с Flexbox законно.

Comments

[Дмитрий Качуринец]

1) хз помогут ли тут медиазапросы, ведь в моем случае если слева от селекта будет больше блоков, то ему не будет хватать места и он опустится ниже

[Дмитрий Качуринец]

3) может стоит ли в моем случае сделать так, чтобы фильтр на мобильной версии был скрытый, а открывался нажатием на кнопку?

[Ivan Sharapenkov]

Дмитрий Качуринец, а если поменять для селектора margin-left: auto на margin-right: auto? Только тогда выравнивания справа не будет.

[Ivan Sharapenkov]

Дмитрий Качуринец, 3) Здравая мысль, может и стоит

[Дмитрий Качуринец]

Ivan Sharapenkov, да так можно, но мне нужно, чтобы когда есть место, то было выравнивание по правой стороне(

Answer 2

[snap44]

1 у блока с селектом убрать авто-марджин слева и родителю добавить justify-content