Poprawne używanie flexboxa

0

Witajcie!

Bardzo chciałbym ułożyć divy w taki sposób:
(patrz obrazek)

Niestety mój kod zupełnie nie działa.

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>flex</title>
  <link rel="stylesheet" type="text/css" href="flex.css">
</head>
<body>
  <div class="container">
     <div class="dziec1"></div>
     <div class="dziec22"></div>
     <div class="dziec11"></div>
     <div class="dziec2"></div>


     </div>

</body>
</html>

CSS:

.container {
	display: flex;
	flex-direction: row;
	width:1500px;
	height: 1500px;
	background-color: white;
	flex-wrap: wrap;
}
.dziec1 {
	width: 1500px;
	height: 500px;
	background-color: yellow;
	order: 1;
}
.dziec11 {
	width: 1500px;
	height: 500px;
	background-color: olive;
	order: 4;
}
.dziec2 {
	width: 750px;
	height: 500px;
	background-color: teal;
	order: 2;

}
.dziec22 {
	width: 750px;
	height: 500px;
	background-color: fuchsia;
	order: 3;

}

Jakie błędy popełniłem?

PS: Sorry za kiepskie wykonanie obrazka.
Nauka Gimpa w toku ;-)

2

na początek zrób średniki przy wszystkich kolorach i wartościach na końcu ;)

1

To żyje!
Wielkie dzięki!

1 użytkowników online, w tym zalogowanych: 0, gości: 1