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

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry

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

do góry