🚀 go-pugleaf

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