Poprawne używanie flexboxa

Odpowiedz Nowy wątek
2017-08-05 13:04

Rejestracja: 3 lata temu

Ostatnio: 1 tydzień temu

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

  • flex.jpg (0.05 MB) - ściągnięć: 180
edytowany 2x, ostatnio: adams0, 2017-08-05 13:34

Pozostało 580 znaków

2017-08-05 13:20

Rejestracja: 5 lat temu

Ostatnio: 5 godzin temu

Lokalizacja: Piwnica

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


edytowany 1x, ostatnio: czysteskarpety, 2017-08-05 13:31

Pozostało 580 znaków

2017-08-05 13:36

Rejestracja: 3 lata temu

Ostatnio: 1 tydzień temu

1

To żyje!
Wielkie dzięki!

Pozostało 580 znaków

2017-08-05 13:59

Rejestracja: 5 lat temu

Ostatnio: 5 godzin temu

Lokalizacja: Piwnica

0

spoko, we też pod uwagę budowanie layoutu o wartości procentowe (plus media queries) np.
https://codepen.io/cchambers/pen/KdBpa
http://callmenick.com/post/flexbox-examples
https://www.quackit.com/css/f[...]les/flexbox_grid_examples.cfm


Pozostało 580 znaków

Odpowiedz

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