All examples

Layouts & positioning > Flexbox
Exercise: form layout

Flexbox is great for aligning questions on a form.

Exercise time!

Without changing the HTML, make it so that:

Example code

							<style>
form {
  display: flex; 
	flex-direction: column;
}

.form-row {
	display: flex;
}

</style>

<form>
	<div class="form-row" id="row1">
	  <label for="q1">Name</label>
		<input id="q1" type="text" />
	</div>
	<div class="form-row" id="row2">
		<label for="q2">E-mail</label>
		<input id="q2" type="email" />
	</div>
	<div class="form-row" id="row3">
		<label for="q3">Favourite Smashing</label>
		<select id="q3">
		  <option>Freiburg</option>
			<option>New York</option>
			<option>Antwerp</option>
		</select>
	</div>
	<div class="form-row" id="row4">
		<label for="q4">Favourite film</label>
		<input type="text" />
	</div>
</form>

Preview

Answer

Open the answer

This is how you could achieve it:

Example code

								<style>
	form {
		display: flex; 
		flex-direction: column;
		gap: 1em;
	}
	
	.form-row {
		display: flex;
		flex-direction: column;
	}
	
	</style>
	
	<form>
		<div class="form-row">
			<label for="q1">Name</label>
			<input id="q1" type="text" />
		</div>
		<div class="form-row">
			<label for="q2">E-mail</label>
			<input id="q2" type="email" />
		</div>
		<div class="form-row">
			<label for="q3">Favourite Smashing</label>
			<select id="q3">
				<option>Freiburg</option>
				<option>New York</option>
				<option>Antwerp</option>
			</select>
		</div>
		<div class="form-row">
			<label for="q4">Pet name</label>
			<input type="text" />
		</div>
	</form>

Preview