🚀 go-pugleaf

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

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

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

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

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

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_WRPH4TRnY3qHf1tVFbviLo/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

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

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