CSS, jak działa flex-grow?

Article View: pl.comp.www

Article #408659

#408659

From: Marek S
Date: Wed, 28 Feb 2018 15:07

35 lines
1435 bytes

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

Technical Details

Message-ID: <p76gjt$gee$1@node1.news.atman.pl>

Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed2.atman.pl!newsfeed.atman.pl!.POSTED!not-for-mail

Show Full Headers

Complete Article Headers

Path: mbox-mo1.pugleaf.net!news-archive.icm.edu.pl!news.icm.edu.pl!newsfeed2.atman.pl!newsfeed.atman.pl!.POSTED!not-for-mail
From: Marek S <precz@spamowi.com>
Newsgroups: pl.comp.www
Subject: CSS, jak działa flex-grow?
Date: Wed, 28 Feb 2018 16:07:38 +0100
Organization: ATMAN - ATM S.A.
Lines: 35
Message-ID: <p76gjt$gee$1@node1.news.atman.pl>
NNTP-Posting-Host: 89-69-207-111.dynamic.chello.pl
Mime-Version: 1.0
X-Trace: node1.news.atman.pl 1519830461 16846 89.69.207.111 (28 Feb 2018 15:07:41 GMT)
X-Complaints-To: usenet@atman.pl
NNTP-Posting-Date: Wed, 28 Feb 2018 15:07:41 +0000 (UTC)
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Thunderbird/52.6.0
X-Mozilla-News-Host: news://news.atman.pl:119
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit