Dynamiczna siatka CSS Flex o różnych rozmiarach

Question

Mam problem z flexem.

Mam opakowanie, w którym można wyświetlić minimum 1 i maksymalnie 9 kwadratów. Kwadraty mogą mieć wiele rozmiarów, w zależności od liczby kwadratów w siatce. Mam wszystkie wymagane przypadki pracujących z wyjątkiem jednego, jak widać na tym zdjęciu:

My style są:

.grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    align-content: space-between; 
    width: 300px; 
    height: 300px; 
    position: relative; 
} 

Plus. obrazy zostały sklasyfikowane w oparciu o ogólną ich liczbę i pozycję na liście.

Problem pojawia się w sytuacji, gdy mam 1 duży kwadrat (zajmuje on 4 małe kwadraty) i 5 małych kwadratów wokół niego od prawej i dolnej.

Ten duży jest pierwszy, jak powinien.

Obok niego (prawy górny róg) jest drugi, to również poprawne.

Trzeci znajduje się w lewym dolnym rogu i powinien znajdować się w drugim wierszu iz prawej strony. Z tego powodu wszystkie pozostałe znajdują się w złym położeniu, więc ten ostatni jest przepełniony.

Próbowałem wiele kombinacji, stosunek justify-contentalign-content, align-items i align-self ale nic nie działało.

Wrócę do tony zajęć i stawiam absolutne rozwiązanie, jeśli nie ma na to elastycznego rozwiązania. Ale nie podoba mi się to. To zbyt wiele stylów i nie wygląda dobrze.

Każda rada byłaby mile widziana.

Answer 1

myślę pływak jest lepszym rozwiązaniem dla Ciebie, sprawdź ten fragment:

.grid { 
 
    width: 300px; 
 
} 
 

 
.box { 
 
    background: orange; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
    float: left; 
 
} 
 

 
.wide { 
 
    width: 190px; 
 
} 
 

 
.tall { 
 
    height: 190px; 
 
} 
 

 
.empty { 
 
    background: transparent 
 
} 
 

 

 
/* you can ignore everything after this comment - it's all for illustration */ 
 
body { 
 
    background: #334; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 

 
.example { 
 
    display: inline-block; 
 
    margin: 5px; 
 
    border: 1px solid #445; 
 
    padding: 10px; 
 

 
    width: 300px; 
 
} 
 

 
h3 { 
 
    margin: 0 0 5px 0; 
 
}

<div class="example"> 
 
    <h3>Example 1</h3> 
 
    <div class="grid"> 
 
    <div class="box wide tall"></div> 
 
    <div class="box tall empty"></div> 
 
    <div class="box wide empty"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 

 
<div class="example"> 
 
    <h3>Example 2</h3> 
 
    <div class="grid"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 

 
<div class="example"> 
 
    <h3>Example 4</h3> 
 
    <div class="grid"> 
 
    <div class="box wide tall"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

Flex wciąż próbuje uczynić kompletne rzędy elementów, więc duży plac i twój mały kwadrat są częścią jednego rzędu; nie ma wsparcia dla układania poza tym.

Float z drugiej strony próbuje wypchać elementy, gdziekolwiek się zmieści.

EDIT

zaktualizowałem tę odpowiedź z przykładów, w jaki sposób odtworzyć większość z powyższych zdjęć (mam celowo pominął 2 przez 2 przykład - nie chciała z cloud odpowiedź klasy dla skrzynek o wysokości/szerokości 1,5).

Korzystanie z klasy empty usunąć kolor z bloków, jak również klas tall i wide wypełnić plam różnej wielkości powinny pomóc dostosować układ jednak uważasz. Jedna uwaga - tutaj empty ustawia kolor tła na transparent. Twoja klasa empty może zrobić więcej lub mniej. Możesz nawet nie potrzebować klasy empty, jeśli wszystko to jest div bez treści.

Answer 2

Nie ma sposobu, aby obsłużyć ten układ z flexem w jednym pojemniku.

Trzeba zrobić małą sztuczkę, aby to osiągnąć.

Łatwiej jeden byłoby wziąć trzecią pozycję z układu elastycznego, umieszczając go bezwzględna:

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-between; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.item { 
 
    background-color: lightblue; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0px; 
 
    border: transparent solid 5px; 
 
    box-sizing: border-box; 
 
    background-clip: content-box; 
 
} 
 

 
.item:first-child { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.item:nth-child(2) { 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 100px; 
 
    right: 0px; 
 
}

<div class="grid"> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
<div class="item"></div> 
 
</div>

Innym posibility, może być więcej w flex pomysłu, ale także podstępny

Ustaw duży element z ujemnym marginesem ujemnym, co powoduje, że zajmuje on tylko jeden rząd (wysokość rzędów małych pudełek).

Teraz musisz mieć układ z 3 rzędami. Problem będzie polegał na tym, że trzecie pole będzie pod pierwszym dużym pudełkiem. Aby rozwiązać ten problem, ustawiamy pseudoelement (mam stylizowany fragment kodu, aby był widoczny, w produkcji ustawiam go na wysokość 0 i zniknie) z tymi samymi właściwościami szerokości i marginesu pierwszego elementu.

.grid { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: space-between; 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
.grid:after { 
 
    content: ""; 
 
    order: 3; 
 
    background-color: red; 
 
    width: 190px; 
 
    height: 10px; 
 
    margin: 5px; 
 
} 
 

 
.item { 
 
    background-color: lightblue; 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
} 
 

 
.item:first-child { 
 
    width: 190px; 
 
    height: 190px; 
 
    margin-bottom: -100px; 
 
    order: 1; 
 
    opacity: 0.5; 
 
} 
 

 
.item:nth-child(2) { 
 
    order: 2; 
 
} 
 

 
.item:nth-child(n+3) { 
 
    order: 4; 
 
}

<div class="grid"> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div> 
 
<div class="item">6</div> 
 
</div>