eGospodarka.pl

eGospodarka.plGrupypl.comp.www › CSS, jak działa flex-grow?
Ilość wypowiedzi w tym wątku: 9

  • 1. Data: 2018-02-28 16:07:38
    Temat: CSS, jak działa flex-grow?
    Od: Marek S <p...@s...com>

    Witam,

    Nijak nie potrafię zrozumieć jak atrybut działa. Wszystkie elementy z
    tym atrybutem są różnej szerokości. Boxy stają się równe tylko wtedy,
    gdy usunę wszystkie teksty. O co chodzi?

    Kod:

    <div class="container">
    <div>aaa</div>
    <div>aaa bbb</div>
    <div>ccccc</div>
    <div>ccccc dddd<br>
    line 2</div>
    <div>ccccc dddd eee</div>
    <div>f</div>
    </div>

    <style>
    .container {
    display: flex;
    background-color: #c00;
    }
    .container div {
    background-color: #eee;
    padding: 10px;
    border: 1px solid #cc0;
    flex-grow: 1;

    }
    </style>

    --
    Pozdrawiam,
    Marek



  • 2. Data: 2018-03-01 01:01:00
    Temat: Re: CSS, jak działa flex-grow?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    Dnia Wed, 28 Feb 2018 16:07:38 +0100, Marek S napisał(a):

    > Nijak nie potrafię zrozumieć jak atrybut działa. Wszystkie elementy z
    > tym atrybutem są różnej szerokości. Boxy stają się równe tylko wtedy,
    > gdy usunę wszystkie teksty. O co chodzi?

    Ten atrybut musisz rozpatrywać w połączeniu z flex-shrink i flex-basis,
    dopiero wtedy ma sens. W tym przypadku miesza Ci flex-basis, który
    domyślnie ma wartość "auto", więc przeglądarka za szerokość początkową
    bierze szerokość tekstu. A później każesz jej wyrównać proporcjonalnie
    wszystkie elementy, więc dodaje do każdego tę samą ilość pustego miejsca.

    Jeśli chcesz mieć wszystkie elementy tej samej *całkowitej* szerokości (nie
    proporcjonalnej do treści), to musisz jeszcze dodać "flex-basis: 0".

    --
    Borys Pogoreło
    borys(#)leszno,edu,pl


  • 3. Data: 2018-03-01 12:54:26
    Temat: Re: CSS, jak działa flex-grow?
    Od: Marek S <p...@s...com>

    W dniu 2018-03-01 o 01:01, Borys Pogoreło pisze:

    > Ten atrybut musisz rozpatrywać w połączeniu z flex-shrink i flex-basis,
    > dopiero wtedy ma sens. W tym przypadku miesza Ci flex-basis, który
    > domyślnie ma wartość "auto", więc przeglądarka za szerokość początkową
    > bierze szerokość tekstu. A później każesz jej wyrównać proporcjonalnie
    > wszystkie elementy, więc dodaje do każdego tę samą ilość pustego miejsca.
    >
    > Jeśli chcesz mieć wszystkie elementy tej samej *całkowitej* szerokości (nie
    > proporcjonalnej do treści), to musisz jeszcze dodać "flex-basis: 0".
    >

    Dzięki - trochę pomogło. Trochę bo nadal jest coś nie tak jak to bym
    sobie wyobrażał.

    Rozumiem, że z flex-shrink się pomyliłeś? Bo albo grow albo shrink?

    Zrobiłem eksperyment. Dałem za Twoją poradą basis na 0. Rozciągnąłem
    layout tak aby komórka po lewej miała 200px szerokości. Wszystkie
    komórki z wyjątkiem są teraz równe. Niby świetnie, ale...

    ustawiłem dla komórki #2 style="flex-grow: 2". No i niespodzianka.
    Wszystkie komórki z wyjątkiem #2 mają nadal po 200px ale 2ga ma...
    370px! Pomyślałem: dobra, ekran może za wąski. Rozciągnąłem go więc do
    300px na komórkę. No i #2 ma teraz 520px. Na Edge i FF identycznie. Więc
    nadal coś jest nie tak.

    Zrobiłem też kolejną rzecz: ustawiłem basis na 200px. Dla układu
    poziomego oczekiwałbym, że zadziała jak width. Tymczasem chyba nic się
    nie nie dzieje. Efekt podobny do wartości 0 i to nawet jeśli ostatnia
    komórka ma flex-basis:auto - bo pomyślałem, że jedna z nich musi przejąć
    na siebie nadmiar pikseli. Owszem, zmieniła rozmiar ale reszta nie ma po
    200px - jest elastyczna.

    --
    Pozdrawiam,
    Marek


  • 4. Data: 2018-03-01 20:38:33
    Temat: Re: CSS, jak działa flex-grow?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    Dnia Thu, 1 Mar 2018 12:54:26 +0100, Marek S napisał(a):

    > W dniu 2018-03-01 o 01:01, Borys Pogoreło pisze:
    >
    > Dzięki - trochę pomogło. Trochę bo nadal jest coś nie tak jak to bym
    > sobie wyobrażał.
    >
    > Rozumiem, że z flex-shrink się pomyliłeś? Bo albo grow albo shrink?

    Nie, wszystkie trzy mają znaczenie. flex-shrink steruje układem przy zbyt
    małej ilości miejsca.

    > ustawiłem dla komórki #2 style="flex-grow: 2". No i niespodzianka.
    > Wszystkie komórki z wyjątkiem #2 mają nadal po 200px ale 2ga ma...
    > 370px! Pomyślałem: dobra, ekran może za wąski. Rozciągnąłem go więc do
    > 300px na komórkę. No i #2 ma teraz 520px. Na Edge i FF identycznie. Więc
    > nadal coś jest nie tak.

    Wszystko się zgadza, odejmij padding i krawędzie. Dlaczego? Bo tak mówi
    specyfikacja ;)

    > Zrobiłem też kolejną rzecz: ustawiłem basis na 200px. Dla układu
    > poziomego oczekiwałbym, że zadziała jak width. Tymczasem chyba nic się
    > nie nie dzieje. Efekt podobny do wartości 0 i to nawet jeśli ostatnia
    > komórka ma flex-basis:auto - bo pomyślałem, że jedna z nich musi przejąć
    > na siebie nadmiar pikseli. Owszem, zmieniła rozmiar ale reszta nie ma po
    > 200px - jest elastyczna.

    Bo to jest tylko wartość początkowa, względem której liczone są proporcje.
    Czy to będzie 0, 200px czy 10000px, to proporcje wyjdą te same. Jeśli
    ostatniej z tych 200px dasz "auto" to po prostu będzie mniejsza, bo
    pozostałe wykorzystają całą jej nadmiarową szerokość w celu zbliżenia się
    do narzuconej proporcji.

    --
    Borys Pogoreło
    borys(#)leszno,edu,pl


  • 5. Data: 2018-03-02 15:53:28
    Temat: Re: CSS, jak działa flex-grow?
    Od: Marek S <p...@s...com>

    W dniu 2018-03-01 o 20:38, Borys Pogoreło pisze:
    > Dnia Thu, 1 Mar 2018 12:54:26 +0100, Marek S napisał(a):
    >
    >> Rozumiem, że z flex-shrink się pomyliłeś? Bo albo grow albo shrink?
    >
    > Nie, wszystkie trzy mają znaczenie. flex-shrink steruje układem przy zbyt
    > małej ilości miejsca.

    Czyli shrink i grow używamy jednocześnie?

    >> Więc
    >> nadal coś jest nie tak.
    >
    > Wszystko się zgadza, odejmij padding i krawędzie. Dlaczego? Bo tak mówi
    > specyfikacja ;)

    Jasne... zapomniałem wyłączyć paddingi (wszystkie ustawiam na 0). Teraz
    pasuje co do piksela...ale pod warunkiem, że flex-basis = 0. Przy
    ustawieniu 200px wszystkie komórki stają się równe. Ignorowana jest
    wartość grow ustawiona na 2 dla jednej z nich. Ki diabeł?

    A wątek utworzyłem bo właśnie nie mogłem tego znaleźć w dokumentacji:

    http://www.w3.org/TR/css-flexbox-1/#item-margins

    Ten akapit jest zupełnie niejasny dla mnie. Piszą o procentach, nic nie
    mówią o wpływie basis. Skąd masz informacje na ten temat? Nie mogę
    zaskoczyć algorytmu całej tej idei flex layout. Wiem do czego to służy
    ale kalkulacji nie ogarniam. Np. w/w dokumentacja wspomina, że basis
    jest wartością inicjalną zanim wolna przestrzeń zostanie
    rozdystrybuowana zgodnie flex factor. No to skoro zaraz zostanie ta
    wartość inicjalna zmieniona, to po co ona jest w ogóle? A po drugie, jak
    napisałem ciut wyżej, nie zauważyłem aby flex factor miał jakiś wpływ
    gdy basis jest w px (przy zerowym paddingu). Nic z tego nie rozumiem.

    --
    Pozdrawiam,
    Marek


  • 6. Data: 2018-03-02 21:26:52
    Temat: Re: CSS, jak działa flex-grow?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    Dnia Fri, 2 Mar 2018 15:53:28 +0100, Marek S napisał(a):

    > Czyli shrink i grow używamy jednocześnie?

    Tak. Te własności otrzymują elementy flex, w tym przypadku niejawnie. I
    uwaga na różnice w implementajach przeglądarek, lepiej wszystkie trzy
    wartości ustawić jawnie. Bo IE/Safari mają swoje odpały.

    > Jasne... zapomniałem wyłączyć paddingi (wszystkie ustawiam na 0). Teraz
    > pasuje co do piksela...ale pod warunkiem, że flex-basis = 0. Przy
    > ustawieniu 200px wszystkie komórki stają się równe. Ignorowana jest
    > wartość grow ustawiona na 2 dla jednej z nich. Ki diabeł?

    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ć.

    > A wątek utworzyłem bo właśnie nie mogłem tego znaleźć w dokumentacji:
    >
    > http://www.w3.org/TR/css-flexbox-1/#item-margins
    >
    > Ten akapit jest zupełnie niejasny dla mnie. Piszą o procentach, nic nie
    > mówią o wpływie basis. Skąd masz informacje na ten temat?

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

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

    --
    Borys Pogoreło
    borys(#)leszno,edu,pl


  • 7. Data: 2018-03-02 23:16:26
    Temat: Re: CSS, jak działa flex-grow?
    Od: Marek S <p...@s...com>

    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


  • 8. Data: 2018-03-03 00:14:52
    Temat: Re: CSS, jak działa flex-grow?
    Od: Borys Pogoreło <b...@p...edu.leszno>

    Dnia Fri, 2 Mar 2018 23:16:26 +0100, Marek S napisał(a):

    > 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?

    Basis jest wartością początkową. Jeśli założymy, że jest więcej miejsca,
    niż mają komórki, to w Twoim przykładzie liczysz to z grubsza tak:
    - komórki mają flex-basis szerokości początkowej każda (200px)
    - pozostała przestrzeń jest dzielona na sumę flex-grow (7)
    - wynik podziału jest dodawany do szerokości każdej z komórek, pomnożony
    przez flex-grow

    Ustaw sobie jakieś proste do ogarnięcia wartości (np. 1000px całość, 100px
    flex-basis, bez odstępów i ramek), to łatwo to policzysz.

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

    Poczekaj, aż zaczniesz naukę grida. Tam się ascii-arty rysuje w CSS.

    --
    Borys Pogoreło
    borys(#)leszno,edu,pl


  • 9. Data: 2018-03-03 16:43:18
    Temat: Re: CSS, jak działa flex-grow?
    Od: Marek S <p...@s...com>

    W dniu 2018-03-03 o 00:14, Borys Pogoreło pisze:

    >
    > Poczekaj, aż zaczniesz naukę grida. Tam się ascii-arty rysuje w CSS.
    >

    Dzięki za pomoc z flexem. Mniej więcej zatrybiłem ideę. Teraz sam muszę
    się pobawić - pomierzyć.

    Do grida podchodzę póki co jak do jeża. Niby w caniuse jest support dla
    większości browserów ale jak w Google zajrzałem, to ludziska biadolą.
    Gaję sobie póki co trochę luzu z tym tematem. Aczkolwiek masochizm jest
    zaplanowany w niedalekiej perspektywie :-)

    --
    Pozdrawiam,
    Marek

strony : [ 1 ]



Szukaj w grupach

Szukaj w grupach

REKLAMA

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:

Ok, rozumiem Strona wykorzystuje pliki cookies w celu prawidłowego jej działania oraz korzystania z narzędzi analitycznych, reklamowych, marketingowych i społecznościowych. Szczegóły znajdują się w Polityce Prywatności. Dalsze korzystanie ze strony oznacza, że zgadzasz się na ich użycie. Jeśli nie chcesz, aby pliki cookies były zapisywane w pamięci Twojego urządzenia, możesz to zmienić za pomocą ustawień przeglądarki.