From 56128e4c267e489e08b5e7108362c6c04b35c362 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 3 Nov 2021 02:17:02 +0900 Subject: CSS フレックスボックス関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/01 時点の英語版に同期 --- files/ja/web/css/flex/index.md | 306 +++++++++++++++++++---------------------- 1 file changed, 139 insertions(+), 167 deletions(-) (limited to 'files/ja/web/css/flex') diff --git a/files/ja/web/css/flex/index.md b/files/ja/web/css/flex/index.md index 663452dca7..4fe28859c4 100644 --- a/files/ja/web/css/flex/index.md +++ b/files/ja/web/css/flex/index.md @@ -3,148 +3,136 @@ title: flex slug: Web/CSS/flex tags: - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS フレックスボックス + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.flex translation_of: Web/CSS/flex --- -
{{CSSRef}}
+{{CSSRef}} -

flex は CSS の一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。

+**`flex`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、フレックス*アイテム*をフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。 -
{{EmbedInteractiveExample("pages/css/flex.html")}}
+{{EmbedInteractiveExample("pages/css/flex.html")}} - +## 構成要素のプロパティ -

構成するプロパティ

+このプロパティは以下の CSS プロパティの一括指定です。 -

このプロパティは以下の CSS プロパティの一括指定です。

+- {{cssxref("flex-grow")}} +- {{cssxref("flex-shrink")}} +- {{cssxref("flex-basis")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 flex: auto;
 flex: initial;
 flex: none;
 
-/* 単位がない数値を1つ指定: flex-grow */
+/* 単位がない数値を 1 つ指定: flex-grow */
 flex: 2;
 
-/* 幅または高さを1つ指定: flex-basis */
+/* 幅または高さを 1 つ指定: flex-basis */
 flex: 10em;
 flex: 30%;
 flex: min-content;
 
-/* 値を2つ指定: flex-grow | flex-basis */
+/* 値を 2 つ指定: flex-grow | flex-basis */
 flex: 1 30px;
 
-/* 値を2つ指定: flex-grow | flex-shrink */
+/* 値を 2 つ指定: flex-grow | flex-shrink */
 flex: 2 2;
 
-/* 値を3つ指定: flex-grow | flex-shrink | flex-basis */
+/* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis */
 flex: 2 2 10%;
 
 /* グローバル値 */
 flex: inherit;
 flex: initial;
+flex: revert;
 flex: unset;
-
- -

flex プロパティは1つ、2つ、3つの値を取ることがあります。

- - - -

値

- -
-
initial
-
アイテムは width および height プロパティによって大きさが決められます。コンテナーに合うように最小サイズまで収縮しますが、フレックスコンテナーの空き領域を埋めるために伸長することはありません。これは "flex: 0 1 auto" と同等です。
-
auto
-
アイテムは width および height プロパティによって大きさが決められますが、フレックスコンテナーの空き領域を埋めるために伸長したり、コンテナーに合うように最小サイズまで収縮したりします。これは "flex: 1 1 auto" と同等です。
-
none
-
アイテムは width および height プロパティによって大きさが決められます。大きさは完全に固定で、フレックスコンテナーに連動して収縮したり伸長したりすることはありません。これは"flex: 0 0 auto" と同等です。
-
<'flex-grow'>
-
フレックスアイテムの {{cssxref("flex-grow")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 0)
-
<'flex-shrink'>
-
フレックスアイテムの {{cssxref("flex-shrink")}} を定義します。負の値は無効とみなされます。省略時の既定値は 1 です。 (初期値は 1)
-
<'flex-basis'>
-
フレックスアイテムの {{cssxref("flex-basis")}} を定義します。希望サイズが 0 ならば、フレキシビリティとして解釈されないように単位をつけなければなりません。省略時の既定値は 1 です。 (初期値は auto)
-
- -

解説

- -

多くの場合、 flex には auto, initial, none, または単位のない正の数を設定してください。これらの値の効果を確認するには、以下のフレックスコンテナーの大きさを変更してみてください。

- -
- - - +``` -

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

+{{EmbedLiveSample("Description", 1200, 400, "", "", "example-outcome-frame")}} -

既定ではフレックスアイテムは最小コンテンツサイズよりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。

-
+既定ではフレックスアイテムは内容物の最小の寸法よりも収縮することはありません。これを変更するには、 {{cssxref("min-width")}} または {{cssxref("min-height")}} を設定してください。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 形式文法 {{csssyntax}} -

例

+## 例 -

flex: auto の設定

+

flex: auto の設定

-

HTML

+#### HTML -
<div id="flex-container">
-  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
-  <div class="raw-item" id="raw">Raw box</div>
-</div>
-
+```html +
+
Flex box (click to toggle raw box)
+
Raw box
+
+``` -

CSS

+#### CSS -
#flex-container {
+```css
+#flex-container {
   display: flex;
   flex-direction: row;
 }
 
-#flex-container > .flex-item {
+#flex-container > .flex-item {
   flex: auto;
 }
 
-#flex-container > .raw-item {
+#flex-container > .raw-item {
   width: 5rem;
 }
-
+``` - +``` -

結果

+#### 結果 -

{{EmbedLiveSample('Setting_flex_auto','100%','60')}}

+{{EmbedLiveSample('Setting_flex_auto','100%','100')}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状況備考
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}初回定義
+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 - +- 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)_ -- cgit v1.2.3-54-g00ecf