Zmiana szerokości divów po użyciu flex-basis: calc();

pytanie zadane 19 kwietnia 2024 w HTML i CSS przez Gamin Użytkownik (800 p.)

Witam, mam mały problem z kodem. Po 11-stym divie, pozostałe 9 ma się znaleźć w kolejnej linii (co zrobiłem), ale przy tym szerokość i wysokość divów uległy zmianie (szer. 84px zamiast 50px). Jak usunę flex-basis: calc() to szerokość wraca do normy (50px). Mógłby ktoś podpowiedzieć dlaczego tak się dzieje? Chciałbym otrzymać efekt jak na zdjęciu nr 1:

a otrzymuję coś takiego:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zadanie 10</title>
</head>
<body>
    <style>
        .numbersbox {
          position: fixed;
          border: 1px dashed black;
          background-color: #fdf7ed;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          column-gap: 1px;
        }
        
        .number {
          width: 50px;
          height: 50px;
          line-height: 50px;
          text-align: center;
          color: white;
        }

        .numbersbox > div {
          flex-basis: calc(100%/12);
        }
        
        .one {
          background-color: #9b2915;
          height: 50px;
        }
        
        .two {
          background-color: #E6AC37;
          height: 75px;
        }
        
        .three {
          background-color: #50A2A7;
          height: 100px;
        }
        
        .four {
          background-color: #000F08;
          height: 125px;
        }
        
        .five {
          background-color: #5F4BB6;
          height: 150px;
        }
        </style>
        
        
        <div class="numbersbox">
          <div class="number one">1</div>
          <div class="number two">2</div>
          <div class="number three">3</div>
          <div class="number four">4</div>
          <div class="number five">5</div>
        
          <div class="number one">1</div>
          <div class="number two">2</div>
          <div class="number three">3</div>
          <div class="number four">4</div>
          <div class="number five">5</div>
        
          <div class="number one">1</div>
          <div class="number two">2</div>
          <div class="number three">3</div>
          <div class="number four">4</div>
          <div class="number five">5</div>
        
          <div class="number one">1</div>
          <div class="number two">2</div>
          <div class="number three">3</div>
          <div class="number four">4</div>
          <div class="number five">5</div>
        </div>
</body>
</html>

2 odpowiedzi

odpowiedź 19 kwietnia 2024 przez VBService Ekspert (256,600 p.)
wybrane 19 kwietnia 2024 przez Gamin

Najlepsza

AFAIK, flex-basis "nadpisuje" wyliczone wartość co do width i height, tylko użycie auto powoduje odniesienie do width i height

Note: In case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.

może spróbuj tak:

[ przykładowy kod on-line ]

      .numbersbox {
        --width: 50px;
        position: fixed;
        border: 1px dashed black;
        background-color: #fdf7ed;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: 1px;
        width: calc(var(--width) * 12);
      }

      .number {
        line-height: 50px;
        text-align: center;
        color: white;
      }

      .numbersbox > div {        
        flex: 0 0 var(--width);
      }