CSS Flex Propriété : forcer mise à la ligne d'un input dans un for

Bonjour,

Je sèche un peu sur la propriété flex, j'ai un formulaire tout simple que je souhaite scinder sur 2 lignes.
Nom + Prénom sur la première ligne, et email + validation sur la seconde ligne.

Voilà ce que j'ai pour le moment :

<form id="signup-form" method="post" action="#">
			<input type="text" name="prenom" id="prenom" placeholder="Prenom" /> <input type="text" name="nom" id="nom" placeholder="Nom" />

			<input type="email" name="email" class="box_flex" id="email" placeholder="Email Address" /></div>
				<input type="submit" value="Sign Up" />
			</form>

Niveau CSS :

#signup-form {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		position: relative;
	}
	#signup-form .box-flex {
		
	}

		#signup-form input[type="text"],
		#signup-form input[type="password"] {
			width: 18em;
		}
		#signup-form input[type="email"]{
			width: 20em;
		}

		#signup-form > * {
			margin: 0 0 0 1em;
		}

		#signup-form > :first-child {
			margin: 0 0 0 0;
		}

Je n'ai trouvé que la propriété "wrap" qui conviendrait mais elle s'applique au contenaire, je n'ai rien vu/réussi pour l'élément input.

Merci du coup de main,

Bonjour,

Je suis d'accord avec Ten

Si tu choisis quand-même Flexbox, il faudra a minima imposer une largeur à certains éléments, sans quoi flex-wrap n'aura aucun effet puisque les éléments vont systématiquement profiter de leur "flex-shrink: 1" et se rétrécir.

Bonne journée

Ten a écrit :
Hello,

Pourquoi utiliser flexbox, dans ce cas ?
Un bon vieux display: inline-block, avec une largeur définie pour chacun (genre nom + prénom = 100%) et le tour est joué. Meilleure compatibilité, moins de code... Ça n'irait pas ?

En bonus, tu pourras rajouter des labels à ces champs : ton formulaire est parfaitement inaccessible .

C'est une bonne question, je me base en fait sur un layout existant que j'essaye de modifier et c'est ainsi que j'ai découvert cette "nouvelle" fonctionnalité css. Comme tout était nickel niveau responsive, et autre je me suis d'abord cassé la tête sur le flex.

Je vais repartir à l'ancienne, je maitrise mieux et ce sera probablement plus simple comme tu l'indiques.

Merci Ten ainsi que Raphael pour le complément
Modifié par El-Cherubin (26 Nov 2015 - 09:41)

El-Cherubin a écrit :
Je vais repartir à l'ancienne, je maitrise mieux et ce sera probablement plus simple comme tu l'indiques.

C'est effectivement ce qui va freiner l'adoption de Flexbox et Grid-Layout : on part d'un vécu de 10 ans de bidouilles de float, clearfix et autres choses.
On va mettre un peu de temps à tout désapprendre et à ré-apprendre des choses nouvelles et mieux fichues