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-basis/index.md | 144 ++++++++++++++++------------------- 1 file changed, 64 insertions(+), 80 deletions(-) (limited to 'files/ja/web/css/flex-basis/index.md') diff --git a/files/ja/web/css/flex-basis/index.md b/files/ja/web/css/flex-basis/index.md index 7be7d71aab..60f13accfa 100644 --- a/files/ja/web/css/flex-basis/index.md +++ b/files/ja/web/css/flex-basis/index.md @@ -3,27 +3,33 @@ title: flex-basis slug: Web/CSS/flex-basis tags: - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フレックスボックス + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.flex-basis translation_of: Web/CSS/flex-basis --- -
{{CSSRef}}
+{{CSSRef}} -

flex-basis は CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。

+**`flex-basis`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。 -
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+{{EmbedInteractiveExample("pages/css/flex-basis.html")}} - +この例では、3 つすべてのアイテムの {{cssxref("flex-grow")}} と {{cssxref("flex-shrink")}} プロパティがともに `1` に設定されており、フレックスアイテムが初期の `flex-basis` から伸長したり縮小したりできることを示しています。 -
-

メモ: (auto 以外の) flex-basis と width (または flex-direction: column の場合は height) の両方が要素に設定されていた場合、 flex-basis が優先されます。

-
+このデモでは、最初のアイテムの `flex-basis` を変更します。そして、その `flex-basis` を基準にして伸長したり縮小したりします。つまり、例えば最初のアイテムの `flex-basis` が `200px` の場合、最初は 200px で表示されますが、他のアイテムが最低でも `min-content` の大きさであることを考慮して、利用可能な空間に合わせて縮小されます。 -

構文

+下記の図は、Firefox の [Flexbox インスペクター](/ja/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts)がアイテムがどのような寸法になるのかを理解するのに役立つことを示しています。 -
/* 幅を指定する */
+![Firefox の Flexbox インスペクターでは、アイテムが縮小された後のサイズが表示されます。](firefox-flex-basis.png)
+
+> **Note:** (`auto` 以外の) `flex-basis` と `width` (または `flex-direction: column` の場合は `height`) の両方が要素に設定されていた場合、 `flex-basis` が優先されます。
+
+## 構文
+
+```css
+/* 幅を指定する */
 flex-basis: 10em;
 flex-basis: 3px;
 flex-basis: auto;
@@ -40,63 +46,58 @@ flex-basis: content;
 /* グローバル値 */
 flex-basis: inherit;
 flex-basis: initial;
+flex-basis: revert;
 flex-basis: unset;
-
+``` -

flex-basis プロパティは、content キーワードまたは <'width'> で指定します。

+`flex-basis` プロパティは、`content` キーワードまたは `<'width'>` で指定します。 -

値

+### 値 -
-
<'width'>
-
絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの main size に対する {{cssxref("<percentage>")}}、あるいは auto キーワードで定義します。負の値は不正です。既定値は auto です。
-
content
-
flex アイテムの内容物に基づいて、自動的にサイズを決めます。
-
-
メモ: この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (width または height) を auto にするのと合わせて auto を使用することで、同等の効果を得られます。
+- `<'width'>` + - : 絶対的な {{cssxref("<length>")}}、親のフレックスコンテナーの主軸方向の寸法に対する {{cssxref("<percentage>")}}、あるいは `auto` キーワードで定義します。負の値は無効です。既定値は `auto` です。 +- `content` -
-

経緯:

+ - : フレックスアイテムの内容物に基づいて、自動的に大きさを決めます。 -
    -
  • 元々、flex-basis:auto は "自身の width または height プロパティを参照する" ことを意味していました。
    • -
  • その後 flex-basis:auto の意味が自動サイズ設定に変わり、また "自身の width または height プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。
    • -
  • さらに、この変更が {{bug("1093316")}} で戻されて auto が再び "自身の width または height プロパティを参照する" になり、自動サイズ設定を行うための content キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。
    • -
-
-
-
+ > **Note:** この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。主軸方向の寸法 ([width](https://drafts.csswg.org/css2/visudet.html#propdef-width) または [height](https://drafts.csswg.org/css2/visudet.html#propdef-height)) を `auto` にするのと合わせて `auto` を使用することで、同等の効果を得られます。 + > + > - もともと、`flex-basis:auto` は「自身の `width` または `height` プロパティを参照する」という意味でした。 + > - その後 `flex-basis:auto` の意味が自動拡大縮小設定に変わり、また「自身の `width` または `height` プロパティを参照する」キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。 + > - さらに、この変更が {{bug("1093316")}} で戻されて `auto` が再び「自身の `width` または `height` プロパティを参照する」になり、自動拡大縮小設定を行うための `content` キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

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

例

+## 例 -

フレックスアイテムの初期の寸法の設定

+

フレックスアイテムの初期の寸法の設定

-

HTML

+#### HTML -
<ul class="container">
-  <li class="flex flex1">1: flex-basis test</li>
-  <li class="flex flex2">2: flex-basis test</li>
-  <li class="flex flex3">3: flex-basis test</li>
-  <li class="flex flex4">4: flex-basis test</li>
-  <li class="flex flex5">5: flex-basis test</li>
-</ul>
+```html
+
 
-<ul class="container">
-  <li class="flex flex6">6: flex-basis test</li>
-</ul>
-
+ +``` -

CSS

+#### CSS -
.container {
+```css
+.container {
   font-family: arial, sans-serif;
   margin: 0;
   padding: 0;
@@ -174,39 +175,22 @@ flex-basis: unset;
 .flex6:after {
   content: 'fill';
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}

+{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}} -

仕様書

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

ブラウザーの互換性

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

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

+{{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)_ +- {{cssxref("width")}} -- cgit v1.2.3-54-g00ecf