conflicting/Web/CSS/CSS_Flexible_Box_Layout 以下を削除 (#1522)

それぞれ廃止された旧ページであるため

4 files changed, 3 insertions, 578 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index bbe05c0df0..7cd783785a 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -4139,10 +4139,10 @@
 /ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
 /ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images	/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
 /ja/docs/Web/CSS/CSS_Colors	/en-US/docs/Web/CSS/CSS_Color
-/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox	/ja/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
-/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins	/ja/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox	/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins	/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
 /ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes	/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
-/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications	/ja/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
+/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications	/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
 /ja/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained	/ja/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts
 /ja/docs/Web/CSS/CSS_Masks	/ja/docs/Web/CSS/CSS_Masking
 /ja/docs/Web/CSS/CSS_Reference	/ja/docs/Web/CSS/Reference
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index a1ab8f2e0c..c46c0eed4f 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -48357,20 +48357,6 @@
       "DaViD83"
     ]
   },
-  "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox": {
-    "modified": "2019-03-18T21:27:26.555Z",
-    "contributors": [
-      "mfuji09",
-      "chrisdavidmills",
-      "EmptyPond"
-    ]
-  },
-  "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox": {
-    "modified": "2019-03-23T22:40:47.383Z",
-    "contributors": [
-      "yyss"
-    ]
-  },
   "conflicting/Web/CSS/Media_Queries/Using_media_queries": {
     "modified": "2019-03-24T00:02:57.940Z",
     "contributors": [
diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
deleted file mode 100644
index 7fa1a3b2d7..0000000000
--- a/files/ja/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
+++ /dev/null
@@ -1,369 +0,0 @@
----
-title: クロスブラウザのフレックスボックスのミックスイン
-slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
-tags:
-  - CSS
-  - CSS フレックスボックス
-  - ミックスイン
-  - リファレンス
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins
-original_slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins
----
-<div>{{cssref}}</div>
-
-<p class="summary">この記事では、 flexbox を現在のブラウザーのネイティブ対応を利用して使いこなしたい人のための一連のミックスインを紹介します。</p>
-
-<p>このセットは次のものを使用します。</p>
-
-<ul>
- <li>2009年時点の 'box' 構文 (Firefox や古い WebKit) を使用したフォールバックと、接頭辞付きの構文 (IE10, flex ラッピングのない WebKit ブラウザー)</li>
- <li>最終的な標準の構文 (Firefox, Safari, Chrome, IE11+, Edge, Opera)</li>
-</ul>
-
-<p>原文:</p>
-
-<ul>
- <li><a href="http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/</a></li>
-</ul>
-
-<p>参考文献:</p>
-
-<ul>
- <li><a href="http://w3.org/tr/css3-flexbox/">http://w3.org/tr/css3-flexbox/</a></li>
- <li><s><a href="http://the-echoplex.net/flexyboxes/">http://the-echoplex.net/flexyboxes/</a></s></li>
- <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx</a></li>
- <li><a href="http://css-tricks.com/using-flexbox/">http://css-tricks.com/using-flexbox/</a></li>
- <li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox | CSS-Tricks</a></li>
- <li><a href="https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/">Visual Guide to CSS3 Flexbox: Flexbox Playground |</a></li>
-</ul>
-
-<div class="note"><strong>メモ:</strong> ミックスインは、現在ブラウザーでは対応されていません。下記の大部分を実行するには、代わりに CSS プリプロセッサーを使用する必要があるでしょう。しかし、 CSS プリプロセッサーは単純に妥当な CSS を生成するので、以下で使用されているテクニックは、推奨される場合は純粋な CSS で書くこともできます。</div>
-
-<h3 id="Flexbox_containers" name="Flexbox_containers">フレックスボックスのコンテナー</h3>
-
-<p> {{cssxref("display")}} プロパティに <code>flex</code> の値を使用すると、要素がブロックレベルのコンテナーボックスを生成します。 <code>inline-flex</code> の値では、要素がインラインレベルのフレックスコンテナーボックスを生成します。</p>
-
-<ul>
- <li>値: <code>flex</code> | <code>inline-flex</code></li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-containers">https://drafts.csswg.org/css-flexbox/#flex-containers</a></li>
-</ul>
-
-<pre class="brush: css">@mixin flexbox {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-//Using this mixin
-%flexbox { @include flexbox; }</pre>
-
-<div>
-<pre class="brush: css">@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -moz-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }</pre>
-</div>
-
-<h3 id="Flexbox_direction" name="Flexbox_direction">フレックスボックスの方向</h3>
-
-<p>The {{cssxref("flex-direction")}} property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. This determines the direction in which flex items are laid out in.</p>
-
-<ul>
- <li>値: <code>row</code> (default) | <code>row-reverse</code> | <code>column</code> | <code>column-reverse</code></li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-direction-property">https://drafts.csswg.org/css-flexbox/#flex-direction-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: reverse;
-    -moz-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: normal;
-    -moz-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: reverse;
-    -moz-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-    -moz-box-direction: normal;
-    -moz-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// Shorter version:
-@mixin flex-dir($args...) { @include flex-direction($args...); }</pre>
-</div>
-
-<h3 id="Flexbox_wrap" name="Flexbox_wrap">フレックスボックスの折り返し</h3>
-
-<p>The {{cssxref("flex-wrap")}} property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.</p>
-
-<ul>
- <li>値: <code>nowrap</code> (default) | <code>wrap</code> | <code>wrap-reverse</code></li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property">https://drafts.csswg.org/css-flexbox/#flex-wrap-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex-wrap($value: nowrap) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}</pre>
-</div>
-
-<h3 id="Flexbox_flow_(shorthand)" name="Flexbox_flow_(shorthand)">フレックスボックスのフロー (一括指定)</h3>
-
-<p>The {{cssxref("flex-flow")}} property is shorthand for setting the <code>flex-direction</code> and <code>flex-wrap</code> properties, which together define the flex container's main and cross axes.</p>
-
-<ul>
- <li>値: <code>row</code> (default) | <code>nowrap</code></li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-flow-property">https://drafts.csswg.org/css-flexbox/#flex-flow-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit/FF Box fallback.
-  -webkit-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}</pre>
-</div>
-
-<h3 id="Flexbox_order" name="Flexbox_order">フレックスボックスの順序</h3>
-
-<p>The {{cssxref("order")}} property controls the order in which flex items appear within their flex container, by assigning them to ordinal groups.</p>
-
-<ul>
- <li>Value: any integer (0 is the default)</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#order-property">https://drafts.csswg.org/css-flexbox/#order-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -moz-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}</pre>
-</div>
-
-<h3 id="Flexbox_grow" name="Flexbox_grow">フレックスボックスの伸長</h3>
-
-<p>The {{cssxref("flex-grow")}} property sets the flex grow factor. Negative numbers are invalid.</p>
-
-<ul>
- <li>Value: any integer (0 is the default)</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-grow-property">https://drafts.csswg.org/css-flexbox/#flex-grow-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex-grow($int: 1) {
-  -webkit-box-flex: $int;
-  -moz-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -ms-flex: $int;
-  flex-grow: $int;
-}</pre>
-</div>
-
-<h3 id="Flexbox_shrink" name="Flexbox_shrink">フレックスボックスの縮小</h3>
-
-<p>The {{cssxref("flex-shrink")}} property sets the flex shrink factor. Negative numbers are invalid.</p>
-
-<ul>
- <li>Value: any integer (0 is the default)</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-shrink-property">https://drafts.csswg.org/css-flexbox/#flex-shrink-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex-shrink($int: 0) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex: $int;
-  flex-shrink: $int;
-}</pre>
-</div>
-
-<h3 id="Flexbox_basis" name="Flexbox_basis">フレックスボックスの basis</h3>
-
-<p>The {{cssxref("flex-basis")}} property sets the flex basis. Negative lengths are invalid.</p>
-
-<ul>
- <li>値: See the {{cssxref("flex-basis")}} reference (the default is<code> auto</code>)</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">https://drafts.csswg.org/css-flexbox/#flex-basis-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  flex-basis: $value;
-}</pre>
-</div>
-
-<h3 id="Flexbox_flex_(shorthand)" name="Flexbox_flex_(shorthand)">フレックスボックスの "flex" (一括指定)</h3>
-
-<p>The {{cssxref("flex")}} property specifies the components of a flexible length; <code>flex-grow</code> factor, <code>flex-shrink</code> factor, and the <code>flex-basis</code>. When an element is a flex item, <code>flex</code> is consulted instead of the main size property to determine the main size of the element. If an element is not a flex item, <code>flex</code> has no effect.</p>
-
-<ul>
- <li>値: See the {{cssxref("flex")}} reference for values and default</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#flex-property">https://drafts.csswg.org/css-flexbox/#flex-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin flex($fg: 1, $fs: 0, $fb: auto) {
-
-  // Set a variable to be used by box-flex properties
-  $fg-boxflex: $fg;
-
-  // Box-Flex only supports a flex-grow value so lets grab the
-  // first item in the list and just return that.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box: $fg-boxflex;
-  -moz-box: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -ms-flexbox: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}</pre>
-</div>
-
-<h3 id="Flexbox_justify_content" name="Flexbox_justify_content">フレックスボックスのコンテンツの位置揃え</h3>
-
-<p>The {{cssxref("justify-content")}} property aligns flex items along the main axis of the current line of the flex container. This is done after any flexible lengths and any auto margins have been resolved. Typically, it helps to distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.</p>
-
-<div class="note">
-<p><strong>Note</strong>: <code>space-*</code> values not supported in older syntaxes.</p>
-</div>
-
-<ul>
- <li>値: <code>flex-start</code> (default) | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code></li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#justify-content-property">https://drafts.csswg.org/css-flexbox/#justify-content-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -moz-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -moz-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -moz-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -moz-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  justify-content: $value;
-}
-  // Shorter version:
-  @mixin flex-just($args...) { @include justify-content($args...); }</pre>
-</div>
-
-<h3 id="Flexbox_align_items" name="Flexbox_align_items">フレックスボックスの項目の配置</h3>
-
-<p>Flex items can be aligned in the cross axis of the current line of the flex container, similar to <code>justify-content</code> but in the perpendicular direction. {{cssxref("align-items")}} sets the default alignment for all of the flex container's items, including anonymous flex items. {{cssxref("align-self")}} allows this default alignment to be overridden for individual flex items. (For anonymous flex items, <code>align-self</code> always matches the value of <code>align-items</code> on their associated flex container.)</p>
-
-<ul>
- <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code> (default)</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -moz-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -moz-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -moz-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  align-items: $value;
-}</pre>
-</div>
-
-<h3 id="Flexbox_align_self" name="Flexbox_align_self">フレックスボックスの自己配置</h3>
-
-<p>Values: <code>auto</code> (default) | <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>baseline</code> | <code>stretch</code></p>
-
-<p>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-items-property">https://drafts.csswg.org/css-flexbox/#align-items-property</a></p>
-
-<div>
-<pre class="brush: css">@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}</pre>
-</div>
-
-<h3 id="Flexbox_align_content" name="Flexbox_align_content">フレックスボックスのコンテンツの配置</h3>
-
-<p>The {{cssxref("align-content")}} property aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how <code>justify-content</code> aligns individual items within the main axis. Note that this property has no effect when the flexbox has only a single line.</p>
-
-<ul>
- <li>値: <code>flex-start</code> | <code>flex-end</code> | <code>center</code> | <code>space-between</code> | <code>space-around</code> | <code>stretch</code> (default)</li>
- <li>Spec: <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">https://drafts.csswg.org/css-flexbox/#align-content-property</a></li>
-</ul>
-
-<div>
-<pre class="brush: css">@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}</pre>
-</div>
diff --git a/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
deleted file mode 100644
index 8f7ad0278f..0000000000
--- a/files/ja/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html
+++ /dev/null
@@ -1,192 +0,0 @@
----
-title: Web アプリケーションのレイアウトに flexbox を使用する
-slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
-tags:
-  - Advanced
-  - CSS
-  - CSS Flexible Boxes
-  - Example
-  - Guide
-  - Web
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox
-translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
-original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications
----
-<div>{{CSSRef}}</div>
-
-<p><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">flexbox</a> は、デスクトップからモバイルまで対応する Web アプリケーションのレイアウト設計で助けになります。浮動状態の {{HTMLElement("div")}} 要素、<a href="/ja/docs/Web/CSS/position#Absolute_positioning">絶対位置指定</a>、JavaScript による細工をなくして、数行の <a href="/ja/docs/Web/CSS">CSS</a> だけで水平方向または垂直方向のフローレイアウトを構築します。基本的な用途例を挙げます:</p>
-
-<ul>
- <li>ページの中央に要素を置きたい場合。</li>
- <li>コンテナを垂直方向へ次々に並べて配置したい場合。</li>
- <li>スクリーンサイズが小さいときに垂直方向へ並べ替えられる、ボタンや要素の列を作成したい場合。</li>
-</ul>
-
-<p>この記事では、接頭辞がない現行の標準仕様をサポートするブラウザで <em>flexbox</em> を使用する方法を扱います。古いブラウザ向けのベンダー接頭辞については、<a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の使用に関する、より一般的なガイド</a>をご覧ください。</p>
-
-<h2 id="Basics" name="Basics">基本</h2>
-
-<p>任意の {{HTMLElement("div")}} 要素で {{cssxref("display")}} プロパティに <code>flex</code> を、また {{cssxref("flex-flow")}} に <code>row</code> (要素を水平に並べたい場合) または <code>column</code> (要素を垂直に並べたい場合) を設定すると、内部の要素を flexbox のフローにすることができます。水平方向の flexbox を使用していて内容物を垂直方向に折り返したい場合は、値 <code>wrap</code> も指定します。</p>
-
-<p>そして、flex フローの一部として組み込みたい要素に {{cssxref("flex")}} プロパティを指定します。通常、以下の 3 種類の値のいずれかを使用するでしょう:</p>
-
-<ul>
- <li>ボタンなど、自身に割り当てられた幅を占有するだけの要素にしたい場合は、<code>flex: none</code> を使用します。この値は <code>0 0 auto</code> に展開されます。</li>
- <li>要素のサイズを明示したい場合は、<code>flex: 0 0 <em>size</em></code> を使用します。例: <code>flex 0 0 60px</code></li>
- <li>使用可能な領域を埋めるように拡張する要素にしたい、すなわちフロー内に同種の要素が複数ある場合は均等に領域を共有させたい場合は、<code>flex: auto</code> を使用します。この値は <code>1 1 auto</code> に展開されます。</li>
-</ul>
-
-<p>もちろん他にも使用できる値はありますが、それらは基本的な使用方法を超えるものでしょう。これらの値がどのように適用されるかを、いくつかの例で見ていきましょう。</p>
-
-<h2 id="Centering_an_element_inside_a_page" name="Centering_an_element_inside_a_page">ページ内の中央に要素を配置する</h2>
-
-<p>このような使い方でもっとも簡単な方法は、2 つの flexible box を入れ子にすることです。それぞれの flexbox 内に要素が 3 つあります。そのうち 2 つが詰め物になって、残る要素が中央に置かれます。</p>
-
-<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3>
-
-<pre class="brush: css;">.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-</pre>
-
-<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3>
-
-<pre class="brush: html;">&lt;div class="vertical-box"&gt;
-  &lt;div class="spacer"&gt;&lt;/div&gt;
-  &lt;div class="centered-element horizontal-box"&gt;
-    &lt;div class="spacer"&gt;&lt;/div&gt;
-    &lt;div class="centered-element"&gt;Centered content&lt;/div&gt;
-     &lt;div class="spacer"&gt;&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="spacer"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Result" name="Result">結果</h3>
-
-<p>{{EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500)}}</p>
-
-<h2 id="Flowing_a_set_of_containers_vertically" name="Flowing_a_set_of_containers_vertically">複数のコンテナを垂直方向に並べる</h2>
-
-<p>ヘッダーセクション、コンテンツセクション、フッターセクションがあるレイアウトのページを思い浮かべてください。ヘッダーとフッターのサイズは固定しますが、コンテンツセクションは使用できる領域に応じてリサイズします。これはコンテンツセクションの {{cssxref("flex")}} プロパティを <code>auto</code> に、またヘッダーおよびフッターの {{cssxref("flex")}} プロパティを <code>none</code> にすることで実現できます。</p>
-
-<h3 id="CSS_Content_2" name="CSS_Content_2">CSS コンテンツ</h3>
-
-<pre class="brush: css;highlight:[8,14]">.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-</pre>
-
-<h3 id="HTML_Content_2" name="HTML_Content_2">HTML コンテンツ</h3>
-
-<pre class="brush: html;">&lt;div id="document" class="vertical-box"&gt;
-  &lt;div class="fixed-size"&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;/div&gt;
-  &lt;div id="flexible-content" class="flexible-size"&gt;&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="Javascript_Content" name="Javascript_Content">Javascript コンテンツ</h3>
-
-<pre class="brush: js;">var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height &gt; 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height &lt; 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}</pre>
-
-<h3 id="Result_2" name="Result_2">結果</h3>
-
-<p>{{EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500)}}</p>
-
-<p>この例はヘッダーのボタンをクリックするとサイズが拡大、フッターのボタンをクリックするとサイズが縮小するようになっています。ヘッダーやフッターのサイズを一定にしたままで、どのようにしてコンテンツセクションを自動的に適切なサイズに変えているかを確認してください。</p>
-
-<h2 id="Creating_a_collapsing_horizontal_container" name="Creating_a_collapsing_horizontal_container">折り返される水平方向のコンテナを作成する</h2>
-
-<p>スクリーンサイズに余裕があれば水平方向に情報一式を並べますが、そうでない場合は水平方向のレイアウトを崩したい場合があるかもしれません。これは、flexbox を使用すればとても簡単です。{{cssxref("flex-flow")}} プロパティに値 <code>wrap</code> を追加すると実現できます。</p>
-
-<h3 id="CSS_Content_3" name="CSS_Content_3">CSS コンテンツ</h3>
-
-<pre class="brush: css;highlight:[4]">.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-</pre>
-
-<h3 id="HTML_Content_3" name="HTML_Content_3">HTML コンテンツ</h3>
-
-<pre class="brush: html;">&lt;div id="container" class="horizontal-container"&gt;
-  &lt;div class="fixed-size"&gt;Element 1&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;Element 2&lt;/div&gt;
-  &lt;div class="fixed-size"&gt;Element 3&lt;/div&gt;
-&lt;/div&gt;&lt;button id="increase-size"&gt;Increase container size&lt;/button&gt;&lt;button id="decrease-size"&gt;Decrease container size&lt;/button&gt;
-</pre>
-
-<h3 id="Javascript_Content_2" name="Javascript_Content_2">Javascript コンテンツ</h3>
-
-<pre class="brush: js;">var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width &gt; 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width &lt; 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-</pre>
-
-<h3 id="Result_3" name="Result_3">結果</h3>
-
-<p>{{EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200)}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">CSS flexible box の利用</a></li>
-</ul>