diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-01 00:50:42 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-11-11 00:03:00 +0900 |
| commit | 76c96022ca053fb17e38e3025d4007361a40e924 (patch) | |
| tree | 97cf2c0e1f05bca9a5b3aa2e193cd84652a99d2c /files/ja/web/css/flex-wrap/index.html | |
| parent | dc23e2885cbfe4a3cf2998f5562122eea52bb56e (diff) | |
| download | translated-content-76c96022ca053fb17e38e3025d4007361a40e924.tar.gz translated-content-76c96022ca053fb17e38e3025d4007361a40e924.tar.bz2 translated-content-76c96022ca053fb17e38e3025d4007361a40e924.zip | |
CSS フレックスボックス関係の文書の Markdown 変換準備
Diffstat (limited to 'files/ja/web/css/flex-wrap/index.html')
| -rw-r--r-- | files/ja/web/css/flex-wrap/index.html | 156 |
1 files changed, 0 insertions, 156 deletions
diff --git a/files/ja/web/css/flex-wrap/index.html b/files/ja/web/css/flex-wrap/index.html deleted file mode 100644 index 405f21b733..0000000000 --- a/files/ja/web/css/flex-wrap/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: flex-wrap -slug: Web/CSS/flex-wrap -tags: - - CSS - - CSS フレックスボックス - - CSS プロパティ - - Reference -translation_of: Web/CSS/flex-wrap ---- -<div>{{ CSSRef}}</div> - -<p><a href="/ja/docs/CSS" title="CSS">CSS</a> の <strong><code>flex-wrap</code></strong> プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。</p> - -<div>{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}</div> - -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - -<p>他のプロパティや詳細情報については <a href="/ja/docs/CSS/Using_CSS_flexible_boxes" title="/ja/docs/CSS/Using_CSS_flexible_boxes">CSS フレックスボックスの利用</a>をご覧ください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:css no-line-numbers">flex-wrap: nowrap; /* 既定値 */ -flex-wrap: wrap; -flex-wrap: wrap-reverse; - -/* グローバル値 */ -flex-wrap: inherit; -flex-wrap: initial; -flex-wrap: unset; -</pre> - -<p><code>flex-wrap</code> プロパティは次の値のリストから選択した単一のキーワードで指定します。</p> - -<h3 id="Values" name="Values">値</h3> - -<p>以下の値を利用することができます。</p> - -<dl> - <dt><code>nowrap</code></dt> - <dd>フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 <code>cross-start</code> は、 {{cssxref("flex-direction")}} の値に応じて <code>start</code> または <code>before</code> と同一になります。</dd> - <dt><code>wrap</code></dt> - <dd>フレックスアイテムは複数行に分割されます。 <code>cross-start</code> は <code>flex-direction</code> の値に応じて <code>start</code> または <code>before</code> と同一になり、 <code>cross-end</code> は、指定された <code>cross-start</code> の反対側になります。</dd> - <dt><code>wrap-reverse</code></dt> - <dd><code>wrap</code> と同様に動作しますが、 <code>cross-start</code> と <code>cross-end</code> が入れ替わります。</dd> -</dl> - -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> - -{{csssyntax}} - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="HTML">HTML</h3> - -<div id="Live_Sample"> -<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> -<div class="content"> - <div class="red">1</div> - <div class="green">2</div> - <div class="blue">3</div> -</div> -<h4>This is an example for flex-wrap:nowrap </h4> -<div class="content1"> - <div class="red">1</div> - <div class="green">2</div> - <div class="blue">3</div> -</div> -<h4>This is an example for flex-wrap:wrap-reverse </h4> -<div class="content2"> - <div class="red">1</div> - <div class="green">2</div> - <div class="blue">3</div> -</div> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">/* Common Styles */ -.content, -.content1, -.content2 { - color: #fff; - font: 100 24px/100px sans-serif; - height: 150px; - text-align: center; -} - -.content div, -.content1 div, -.content2 div { - height: 50%; - width: 50%; -} -.red { - background: orangered; -} -.green { - background: yellowgreen; -} -.blue { - background: steelblue; -} - -/* Flexbox Styles */ -.content { - display: flex; - flex-wrap: wrap; -} -.content1 { - display: flex; - flex-wrap: nowrap; -} -.content2 { - display: flex; - flex-wrap: wrap-reverse; -} - -</pre> -</div> - -<h3 id="Results" name="Results">結果</h3> - -<p>{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}</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-wrap-property', 'flex-wrap') }}</td> - <td>{{ Spec2('CSS3 Flexbox') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<p>{{Compat("css.properties.flex-wrap")}}</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/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></em></li> -</ul> |
