From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/flex-wrap/index.html | 158 ++++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 files/ja/web/css/flex-wrap/index.html (limited to 'files/ja/web/css/flex-wrap') diff --git a/files/ja/web/css/flex-wrap/index.html b/files/ja/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..2fc408e1c1 --- /dev/null +++ b/files/ja/web/css/flex-wrap/index.html @@ -0,0 +1,158 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS フレックスボックス + - CSS プロパティ + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

CSS の flex-wrap プロパティは、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。

+ +
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
+ + + +

他のプロパティや詳細情報については CSS フレックスボックスの利用をご覧ください。

+ +

構文

+ +
flex-wrap: nowrap; /* 既定値 */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* グローバル値 */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

flex-wrap プロパティは次の値のリストから選択した単一のキーワードで指定します。

+ +

値

+ +

以下の値を利用することができます。

+ +
+
nowrap
+
フレックスアイテムは単一行に配置され、フレックスコンテナーからあふれることもあります。 cross-start は、 {{cssxref("flex-direction")}} の値に応じて start または before と同一になります。
+
wrap
+
フレックスアイテムは複数行に分割されます。 cross-start は flex-direction の値に応じて start または before と同一になり、 cross-end は、指定された cross-start の反対側になります。
+
wrap-reverse
+
wrap と同様に動作しますが、 cross-start と cross-end が入れ替わります。
+
+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

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>
+
+ +

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;
+}
+
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ + + +

{{Compat("css.properties.flex-wrap")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf