diff options
Diffstat (limited to 'files/ja/web/css/flex-grow/index.md')
| -rw-r--r-- | files/ja/web/css/flex-grow/index.md | 126 |
1 files changed, 54 insertions, 72 deletions
diff --git a/files/ja/web/css/flex-grow/index.md b/files/ja/web/css/flex-grow/index.md index 5d75820101..d6cf8521d9 100644 --- a/files/ja/web/css/flex-grow/index.md +++ b/files/ja/web/css/flex-grow/index.md @@ -3,82 +3,82 @@ title: flex-grow slug: Web/CSS/flex-grow tags: - CSS - - CSS Flexible Boxes - - CSS Property + - CSS フレックスボックス + - CSS プロパティ - NeedsContent - - Reference - - 'recipe:css-property' + - リファレンス + - recipe:css-property +browser-compat: css.properties.flex-grow translation_of: Web/CSS/flex-grow --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<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> +**`flex-grow`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの[主軸方向の寸法](https://www.w3.org/TR/css-flexbox/#main-size)のフレックス伸長係数を設定します。 -<div>{{EmbedInteractiveExample("pages/css/flex-grow.html")}}</div> +{{EmbedInteractiveExample("pages/css/flex-grow.html")}} -<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> 値 */ +```css +/* <number> 値 */ flex-grow: 3; flex-grow: 0.6; /* グローバル値 */ flex-grow: inherit; flex-grow: initial; +flex-grow: revert; flex-grow: unset; -</pre> +``` -<p><code>flex-grow</code> プロパティは単一の <code><a href="#<number>"><number></a></code> として指定します。</p> +`flex-grow` プロパティは単一の `[<number>](#<number>)` として指定します。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><a id="<number>" name="<number>"><code><number></code></a></dt> - <dd>{{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は0です。</dd> -</dl> +- `<number>` + - : {{cssxref("<number>")}} をご覧ください。負の値は無効です。既定値は 0 です。 -<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> +[主軸方向の寸法](https://www.w3.org/TR/css-flexbox/#main-size)は、アイテムの幅または高さのどちらかで、 {{cssxref("flex-direction")}} の値に依存して決まります。 -<p>残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って配分されます。</p> +残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものです。すべての兄弟アイテムが同じフレックス伸長係数であった場合、すべてのアイテムには残りの空間が等しく割り当てられ、そうでなければ定義されたそれぞれフレックス伸長係数の比率に従って分配されます。 -<p>使用するにあたって、 <code>flex-grow</code> は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。</p> +使用するにあたって、 `flex-grow` は他のフレックスプロパティである {{cssxref("flex-shrink")}} や {{cssxref("flex-basis")}} とともに使用され、通常はすべての値が設定されることを保証するために一括指定の {{cssxref("flex")}} を使用して定義します。 -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> +## 公式定義 -<p>{{cssinfo}}</p> +{{cssinfo}} -<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> +<h3 id="Setting_flex_item_grow_factor">フレックスアイテムの伸長係数の設定</h3> -<h4 id="HTML">HTML</h4> +#### HTML -<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> +```html +<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> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">#content { +```css +#content { display: flex; justify-content: space-around; @@ -95,40 +95,22 @@ flex-grow: unset; 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> +{{EmbedLiveSample('Setting_flex_item_grow_factor', '700px', '300px', '', 'Web/CSS/flex-grow')}} -<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> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<p>{{Compat("css.properties.flex-grow")}}</p> +{{Compat}} -<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> +- CSS フレックスボックスガイド: _[フレックスボックスの基本概念](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_ +- CSS フレックスボックスガイド: _[フレックスアイテムの主軸方向における比率の制御](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax)_ +- [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) Manuel Matuzovic による CSS-Tricks の記事で、どのように flex-grow が動作するかを解説している |