How to position blocks with flexbox?

Question

Flexbox

Sandbox .

1) Now in my layout this select is on the right:



But when there is not enough space for it, then it goes down:



I want to make it so that when there is no space for it, it is pressed to the left side, and when there is to the right.

2) How to align this filter to the center on the mobile version? Tried different properties, but it doesn't work.



3) How to make an adaptive on this page in general and how best to position all these blocks on smaller screens?

Answer 1

1) Can be done with media queries
2) Add to .filter,

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

if it is necessary to be centered only for the mobile version, then also media queries. If anything, mixing them with Flexbox is legal.

Answer 2

1 remove auto-margin on the left of the block with select and add justify-content to the parent