diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:41:15 -0500 |
commit | 4b1a9203c547c019fc5398082ae19a3f3d4c3efe (patch) | |
tree | d4a40e13ceeb9f85479605110a76e7a4d5f3b56b /files/de/web/css/flex-grow | |
parent | 33058f2b292b3a581333bdfb21b8f671898c5060 (diff) | |
download | translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.gz translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.tar.bz2 translated-content-4b1a9203c547c019fc5398082ae19a3f3d4c3efe.zip |
initial commit
Diffstat (limited to 'files/de/web/css/flex-grow')
-rw-r--r-- | files/de/web/css/flex-grow/index.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/files/de/web/css/flex-grow/index.html b/files/de/web/css/flex-grow/index.html new file mode 100644 index 0000000000..0a40c317de --- /dev/null +++ b/files/de/web/css/flex-grow/index.html @@ -0,0 +1,82 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz + - Web +translation_of: Web/CSS/flex-grow +--- +<p>{{ CSSRef("CSS Flexible Boxes") }}</p> + +<p>Die <code>flex-grow</code> <a href="/de/docs/Web/CSS">CSS</a> Eigenschaft gibt den Wachstumsfaktor eines flexiblen Elements in dem zur Verfügung stehenden Raum eines Flex Containers an. Wenn alle Schwesternelemente den gleichen flex-grow Wert haben, teilen sich diese Elemente den gleichen Platzanteil im Container auf. Andernfalls entscheidet der Platzanteil durch das Verhältnis, das sich aus den verschiedenen flex-grow Werten ergibt.</p> + +<p>Verwendet wird flex-grow zusammen mit den anderen flex Eigenschaften {{cssxref("flex-shrink")}} und {{cssxref("flex-basis")}}. Im Regelfall wird durch die {{cssxref("flex")}} Kurzschrift sichergestellt, dass alle Werte gesetzt werden.</p> + +<p>{{cssinfo}}</p> + +<p>Siehe die <a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes">Verwendung von CSS Flexible Boxes</a> für weitere Eigenschaften und Informationen.</p> + +<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> + + + +<p> </p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="twopartsyntaxbox">{{csssyntax}} +</pre> + +<pre>flex-grow: 3 + +flex-grow: inherit +</pre> + +<h3 id="Werte">Werte</h3> + +<dl> + <dt><code><number></code></dt> + <dd>Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.</dd> +</dl> + +<h2 id="Beispiele">Beispiele</h2> + +<pre class="brush:css;highlight:[2]">element { + flex-grow: 3; +} +</pre> + +<h2 id="Spezifikationen">Spezifikationen</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spezifikation</th> + <th scope="col">Status</th> + <th scope="col">Kommentar</th> + </tr> + </thead> + <tbody> + <tr> + <td><a class="external" href="http://dev.w3.org/csswg/css3-flexbox/#flex-grow" title="http://dev.w3.org/csswg/css3-flexbox/#flex-grow">CSS Flexible Box Layout Module</a></td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Ursprüngliche Definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2> + +<p>{{Compat("css.properties.flex-grow")}}</p> + +<p>[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung <code>layout.css.flexbox.enabled</code> in <code>about:config</code> auf <code>true</code> gesetzt werden.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/de/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Verwendung von CSS Flexible Boxes</a></li> +</ul> |