Mam następującą bardzo elegancką konstrukcję, ponieważ pasuje do bardzo małych ekranów, każda kolumna jest w 100% zwracana.

.five-columns {
    display: flex;
    flex-flow: row wrap;
}
.column-item {
    flex-basis: 19%;
    flex-grow: 1;
    margin: 0.5% !important;
    min-width: 240px;
    padding: 15px;
    background-color: chocolate;
}
    <div class="five-columns">
        <div class="column-item">1</div>
        <div class="column-item">2</div>
        <div class="column-item">3</div>
        <div class="column-item">4</div>
        <div class="column-item">5</div>
    </div>

Jednak to, co chcę osiągnąć, jest stworzenie niektórych siatek 5, z wyjątkiem jednego, co musi być większe niż inne, podobnie jak ten projekt:

introducir la descripción de la imagen aquí

Jakie zmiany powinny być używane?

0
Valentina 22 październik 2020, 03:39

1 odpowiedź

Najlepsza odpowiedź

Musisz dodać kolejną klasę dla obrazu podwójnego rozmiaru:

.double-column-item{
   Flex-grow: 2;
   Flex-basis: 38%;
 }

Nie jestem pewien, czy musisz nawet podwójnie podwójnie. Jeśli omawia swoje wiersze, możesz użyć takiej przerwy flex

https://tobiasahlin.com/blog/flexbox-break-to-new-row/

0
Ale Plo 22 październik 2020, 00:50