Solucionado
eu não consegui entender muito bem o comportamento que fez com que o input fosse para a linha de baixo, com o order: 1 eu entendi que colocou ele como ultimo elemento da lista mas porque essas propriedades do flex (1 1 100%) colocaram ele na linha de baixo?
Olá, André, como vai?
A sua dúvida é bem pertinente, porque o comportamento do flex: 1 1 100% não fica tão intuitivo à primeira vista.
Quando você define flex: 1 1 100%, está usando a forma abreviada de três propriedades: flex-grow, flex-shrink e flex-basis. Nesse caso específico, 1 1 100% significa que o elemento pode crescer, pode encolher e, principalmente, que o tamanho base dele será 100% da largura disponível do contêiner.
É justamente o flex-basis: 100% que provoca a quebra para a linha de baixo. Em um contêiner flex com flex-wrap: wrap, os itens tentam ocupar espaço na mesma linha enquanto houver largura disponível. Quando um item passa a ter base de 100%, ele está dizendo: quero ocupar 100% da largura da linha. Se já existirem outros elementos antes dele, não sobra espaço suficiente na mesma linha. Como o container permite quebra de linha por causa do wrap, o navegador joga esse item para a próxima linha, onde ele pode ocupar os 100% sozinho.
O order: 1 apenas garante que ele seja renderizado depois dos outros itens. Já o que realmente força a ida para a segunda linha é o flex-basis: 100% combinado com o flex-wrap: wrap no container. Se o container não tivesse wrap, o comportamento seria diferente e os itens tentariam se comprimir para caber na mesma linha.
Complementando a explicação, vou deixar um exemplo estruturado no CodePen para você conseguir visualizar e testar cada comportamento com calma. A ideia é justamente você brincar com as regras css e observar o que muda quando altera ou remove determinadas propriedades.
Também vou deixar um artigo explicando mais sobre o display flex.
Espero ter ajudado.
Siga firme nos seus estudos e conte com o fórum sempre que precisar.
Abraços :)
Eu percebi que sem o Flex Basis o meu input começa a diminuir de tamanho e só quando não tem mais tamanho ele vai para a linha de baixo, mas com o flex basis de 100% eu percebi que ele não deixa encolher igual, pelo que eu entendi ele mantém o input com o tamanho original não permitindo encolher completamente até não sobrar mais espaço, basicamente seria um " se não houver mais espaço na linha, coloca esse item na próxima linha ocupando 100% dela", seria isso? só pra ficar claro pra mim kkkkk e seguindo esse raciocínio eu não poderia ter alterado só o flex basis? porque colocar os valores de 1 no flex grow e no flex shrink?
Oi, André.
O seu raciocínio está bem próximo do que realmente acontece. Quando você define flex-basis: 100%, está dizendo que o tamanho base daquele item, antes de qualquer distribuição de espaço, deve ser 100% da largura da linha. Em um container com flex-wrap: wrap, isso faz com que ele precise de uma linha inteira só para ele. Se já houver outros elementos ocupando espaço antes, não há como dividir essa mesma linha, então ele é automaticamente levado para a próxima.
Quando você não define o flex-basis e deixa o valor padrão, o navegador calcula o tamanho inicial com base no conteúdo ou na largura definida. A partir daí, entra em ação o flex-shrink: 1, que permite que o item encolha para tentar caber na mesma linha junto com os outros. Só depois de atingir o limite mínimo de encolhimento é que ele quebra para a linha de baixo. Já com flex-basis: 100%, o ponto de partida já é ocupar toda a largura, então não existe tentativa real de dividir espaço com os irmãos na mesma linha.
Sobre sua segunda pergunta, sim, você poderia alterar apenas o flex-basis, por exemplo:
Para saber mais: 
ARTIGO .input {
flex-basis: 100%;
}
Então por que usar flex: 1 1 100% em vez de só flex-basis: 100%? Porque o flex abreviado deixa explícito o comportamento completo do item dentro do contexto flex. Ao usar 1 1 100%, você está dizendo que ele pode crescer se houver espaço extra e pode encolher se necessário, além de ter base 100%. É uma forma mais previsível e consistente de controlar o comportamento, especialmente em layouts mais complexos.
Seu raciocínio está bem alinhado. O ponto principal é entender que o flex-basis define o tamanho inicial a partir do qual o Flexbox começa a distribuir ou retirar espaço. Quando esse valor é 100%, ele praticamente obriga o item a ocupar uma linha inteira.