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 ;-)