1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: flex-grow
slug: Web/CSS/flex-grow
tags:
- CSS
- CSS Flexible Boxes
- CSS Property
- NeedsContent
- Reference
- 'recipe:css-property'
translation_of: Web/CSS/flex-grow
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>flex-grow</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの<a href="https://www.w3.org/TR/css-flexbox/#main-size">主軸方向の寸法</a>のフレックス伸長係数を設定します。</span></p>
<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush:css no-line-numbers notranslate">/* <number> 値 */
flex-grow: 3;
flex-grow: 0.6;
/* グローバル値 */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
</pre>
<p><code>flex-grow</code> プロパティは単一の <code><a href="#<number>"><number></a></code> として指定します。</p>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><a id="<number>" name="<number>"><code><number></code></a></dt>
<dd>{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は0です。</dd>
</dl>
<h2 id="Description" name="Description">解説</h2>
<p>このプロパティは、フレックスコンテナー内の残りの空間のうち、どれだけがそのアイテムに割り当てられるか (フレックス伸長係数) を設定します。</p>
<p><a href="https://www.w3.org/TR/css-flexbox/#main-size">主軸方向の寸法</a>は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。</p>
<p>残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。</p>
<p>使用するにあたって、 <code>flex-grow</code> は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。</p>
<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
<p>{{cssinfo}}</p>
<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Setting_flex_item_grow_factor" name="Setting_flex_item_grow_factor">フレックスアイテムの伸長係数の設定</h3>
<h4 id="HTML">HTML</h4>
<div id="Live_Sample">
<pre class="brush: html notranslate"><h4>This is a Flex-Grow</h4>
<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
<div class="box" style="background-color:brown;">F</div>
</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">#content {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
align-items: stretch;
}
.box {
flex-grow: 1;
border: 3px solid rgba(0,0,0,.2);
}
.box1 {
flex-grow: 2;
border: 3px solid rgba(0,0,0,.2);
}
</pre>
</div>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.flex-grow")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">フレックスボックスの基本概念</a></em></li>
<li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li>
<li><a href="https://css-tricks.com/flex-grow-is-weird/">`flex-grow` is weird. Or is it?</a> Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している</li>
</ul>
|
