initial commit

1 files changed, 214 insertions, 0 deletions

diff --git a/files/ja/web/css/flex-basis/index.html b/files/ja/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..68cdc32397
--- /dev/null
+++ b/files/ja/web/css/flex-basis/index.html
@@ -0,0 +1,214 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Property
+  - Reference
+  - 'recipe:css-property'
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p><strong><code>flex-basis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。 {{Cssxref("box-sizing")}} で設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+
+<div class="note">
+<p><strong>メモ</strong>: (<code>auto</code> 以外の) <code>flex-basis</code> と <code>width</code> (または <code>flex-direction: column</code> の場合は <code>height</code>) の両方が要素に設定されていた場合、 <code>flex-basis</code> が優先されます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush:css no-line-numbers notranslate">/* 幅を指定する */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 固有のサイズ指定キーワード */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* フレックスアイテムの内容物に基づいて自動設定する */
+flex-basis: content;
+
+/* グローバル値 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<p><code>flex-basis</code> プロパティは、<code><a href="#content">content</a></code> キーワードまたは <code><a href="#&lt;'width'>">&lt;'width'&gt;</a></code> で指定します。</p>
+
+<h3 id="Values" name="Values">値</h3>
+
+<dl>
+ <dt><code id="&lt;'width'>">&lt;'width'&gt;</code></dt>
+ <dd>絶対的な {{cssxref("&lt;length&gt;")}}、親のフレックスコンテナーの main size に対する {{cssxref("&lt;percentage&gt;")}}、あるいは <code>auto</code> キーワードで定義します。負の値は不正です。既定値は <code>auto</code> です。</dd>
+ <dt><code id="content">content</code></dt>
+ <dd>flex アイテムの内容物に基づいて、自動的にサイズを決めます。</dd>
+ <dd>
+ <div class="note"><strong>メモ:</strong> この値は Flexible Box Layout の初期リリースでは定義されていませんでしたので、古い実装では対応していない場合があります。 main size (<a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">width</a> または <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">height</a>) を <code>auto</code> にするのと合わせて <code>auto</code> を使用することで、同等の効果を得られます。</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>経緯:</strong></p>
+
+ <ul>
+  <li>元々、<code>flex-basis:auto</code> は "自身の <code>width</code> または <code>height</code> プロパティを参照する" ことを意味していました。</li>
+  <li>その後 <code>flex-basis:auto</code> の意味が自動サイズ設定に変わり、また "自身の <code>width</code> または <code>height</code> プロパティを参照する" キーワードとして "main-size" を導入しました。これは {{bug("1032922")}} で実装しました。</li>
+  <li>さらに、この変更が {{bug("1093316")}} で戻されて <code>auto</code> が再び "自身の <code>width</code> または <code>height</code> プロパティを参照する" になり、自動サイズ設定を行うための <code>content</code> キーワードを新たに導入しました (content キーワードの追加は {{bug("1105111")}} で扱っています)。</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<h3 id="Setting_flex_item_initial_sizes" name="Setting_flex_item_initial_sizes">フレックスアイテムの初期の寸法の設定</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;ul class="container"&gt;
+  &lt;li class="flex flex1"&gt;1: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex2"&gt;2: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex3"&gt;3: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex4"&gt;4: flex-basis test&lt;/li&gt;
+  &lt;li class="flex flex5"&gt;5: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;ul class="container"&gt;
+  &lt;li class="flex flex6"&gt;6: flex-basis test&lt;/li&gt;
+&lt;/ul&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 14px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 12px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+</pre>
+
+<h4 id="Results" name="Results">結果</h4>
+
+<p>{{EmbedLiveSample('Setting_flex_item_initial_sizes', '', '360')}}</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', '#propdef-flex-basis', 'flex-basis')}}</td>
+   <td>{{Spec2('CSS3 Flexbox')}}</td>
+   <td>初回定義</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("css.properties.flex-basis")}}</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/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">フレックスアイテムの主軸方向における比率の制御</a></em></li>
+ <li>{{cssxref("width")}}</li>
+</ul>