eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwCSS, jak działa flex-grow?Re: CSS, jak działa flex-grow?
  • Data: 2018-03-02 23:16:26
    Temat: Re: CSS, jak działa flex-grow?
    Od: Marek S <p...@s...com> szukaj wiadomości tego autora
    [ pokaż wszystkie nagłówki ]

    W dniu 2018-03-02 o 21:26, Borys Pogoreło pisze:

    > Wartość bazowa przekracza to, co masz do dyspozycji na ekranie, wiec ta
    > jedna komórka nie ma gdzie rosnąć. Jeśli ustawisz basis odpowiednio
    > mniejsze, to wszystko się zacznie układać.

    Faktycznie było mało. Ale zobacz - rozszerzyłem okno na całą szerokość
    ekranu tj. ponad 3800px i nadal kalkulacje szlag trafia.

    Tu masz screenshot:
    https://drive.google.com/file/d/1tFDkxuKLk_WRPH4TRnY
    3qHf1tVFbviLo/view?usp=sharing

    A może to jest tak, że basis wyznacza jakąś szerokość, z szerokości
    kontenera niech wyjdzie, że lewy i prawy "syntetyczny padding" komórki
    mają po 100px, to szerokość podwojonej komórki to 2x2x100px+basis?


    A kod po modyfikacji:

    <style>
    body {
    background-color: #666;
    }
    .container {
    display: flex;
    background-color: #c00;
    }
    .container div {
    background-color: #eee;
    border: 1px solid #cc0;
    flex-grow: 1;
    flex-basis: 200px;
    padding: 0;
    }
    .container div + div {
    margin-left: 20px;
    }
    </style>
    </head>

    <body>
    <div class="container">
    <div>aaa</div>
    <div style="flex-grow: 2">aaa bb</div>
    <div>ccccc</div>
    <div>ccccc dddd<br>
    line 2</div>
    <div>ccccc dddd eee</div>
    <div>f</div>
    </div>
    </body>

    > Z praktyki. Flexbox trochę się "na czuja" stosuje ;)

    Właśnie zaczynam tak podejrzewać. To pierwszy moduł CSS, którego nie
    ogarniam :-D WebGL wydaje się łatwiejszy :-D

    > Ciebie bardziej interesuje to:
    > https://www.w3.org/TR/css-flexbox-1/#line-sizing

    Poczytam sobie parę razy uważnie i zrobię eksperymenty. Może w końcu
    pojmę w czym rzecz.

    --
    Pozdrawiam,
    Marek

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: