eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwCSS, jak działa flex-grow?Re: CSS, jak działa flex-grow?
  • Path: news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed2.atman.pl!newsfeed.atman.pl!.P
    OSTED!not-for-mail
    From: Marek S <p...@s...com>
    Newsgroups: pl.comp.www
    Subject: Re: CSS, jak działa flex-grow?
    Date: Thu, 1 Mar 2018 12:54:26 +0100
    Organization: ATMAN - ATM S.A.
    Lines: 37
    Message-ID: <p78plj$mjk$1@node1.news.atman.pl>
    References: <p76gjt$gee$1@node1.news.atman.pl>
    <an5v1zww58d7$.12my1ecn4cx4g.dlg@40tude.net>
    NNTP-Posting-Host: 89-69-207-111.dynamic.chello.pl
    Mime-Version: 1.0
    Content-Type: text/plain; charset=utf-8; format=flowed
    Content-Transfer-Encoding: 8bit
    X-Trace: node1.news.atman.pl 1519905267 23156 89.69.207.111 (1 Mar 2018 11:54:27 GMT)
    X-Complaints-To: u...@a...pl
    NNTP-Posting-Date: Thu, 1 Mar 2018 11:54:27 +0000 (UTC)
    User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101
    Thunderbird/52.6.0
    In-Reply-To: <an5v1zww58d7$.12my1ecn4cx4g.dlg@40tude.net>
    Content-Language: pl
    Xref: news-archive.icm.edu.pl pl.comp.www:403440
    [ ukryj nagłówki ]

    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

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: