Re: CSS, jak działa flex-grow? - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › CSS, 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: Fri, 2 Mar 2018 23:16:26 +0100
Organization: ATMAN - ATM S.A.
Lines: 66
Message-ID: <p7cifr$d54$1@node1.news.atman.pl>
References: <p76gjt$gee$1@node1.news.atman.pl>
<an5v1zww58d7$.12my1ecn4cx4g.dlg@40tude.net>
<p78plj$mjk$1@node1.news.atman.pl>
<1...@4...net>
<p7bohb$2hg$1@node2.news.atman.pl>
<y7e5qqhj17ug$.1pxix68tylkdb$.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 1520028987 13476 89.69.207.111 (2 Mar 2018 22:16:27 GMT)
X-Complaints-To: u...@a...pl
NNTP-Posting-Date: Fri, 2 Mar 2018 22:16: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: <y7e5qqhj17ug$.1pxix68tylkdb$.dlg@40tude.net>
Content-Language: pl
Xref: news-archive.icm.edu.pl pl.comp.www:403444
[ ukryj nagłówki ]
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