initial commit

1 files changed, 215 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/flex-basis/index.html b/files/zh-cn/web/css/flex-basis/index.html
new file mode 100644
index 0000000000..d23edb5b0f
--- /dev/null
+++ b/files/zh-cn/web/css/flex-basis/index.html
@@ -0,0 +1,215 @@
+---
+title: flex-basis
+slug: Web/CSS/flex-basis
+tags:
+  - CSS
+  - CSS 属性
+  - CSS 弹性盒子
+  - 参考
+translation_of: Web/CSS/flex-basis
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/zh-CN/docs/Web/css">CSS</a> 属性 <strong><code>flex-basis</code></strong> 指定了 flex 元素在主轴方向上的初始大小。如果不使用  {{Cssxref("box-sizing")}} 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/flex-basis.html")}}</div>
+
+<div></div>
+
+<p class="hidden">这个交互式的例子的源代码存储在一个GitHub库。如果你想为这个项目贡献代码, 请克隆这个仓库 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> 然后给我们提交一个 pull request</p>
+
+<div class="note">
+<p><strong>Note:</strong> 当一个元素同时被设置了 <code>flex-basis</code> (除值为 <code>auto</code> 外) 和 <code>width</code> (或者在 <code>flex-direction: column</code> 情况下设置了<code>height</code>) , <code>flex-basis</code> 具有更高的优先级.</p>
+</div>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:css no-line-numbers">/* 指定&lt;'width'&gt; */
+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 item内容上的自动尺寸 */
+flex-basis: content;
+
+/* 全局数值 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+</pre>
+
+<p>这个 <code>flex-basis</code> 属性 被指定为关键词 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis$edit#content">content</a></code> 或者 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis$edit#%3C'width'%3E">&lt;'width'&gt;</a></code>.</p>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt><code>&lt;'width'&gt;</code></dt>
+ <dd>
+ <p>width 值可以是 {{cssxref("&lt;length&gt;")}}; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的{{cssxref("&lt;percentage&gt;", "百分数")}} 。负值是不被允许的。默认为 <code>auto</code>。</p>
+ </dd>
+ <dt><code>content</code></dt>
+ <dd>基于 flex 的元素的内容自动调整大小。</dd>
+ <dd>
+ <div class="note"><strong>Note:</strong>由于最初规范中没有包括这个值，在一些早期的浏览器实现的flex布局中，content值无效，可以利用设置(<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>) 为 auto达到同样的效果.</div>
+
+ <div class="note">
+ <p id="comment_text_0"><strong>Note:简史</strong></p>
+
+ <ul>
+  <li>最初, "flex-basis:auto" 的含义是 "参照我的<code>width</code>和<code>height</code>属性".</li>
+  <li>在此之后, "flex-basis:auto" 的含义变成了自动尺寸, 而 "main-size" 变成了 "参照我的<code>width</code>和<code>height</code>属性"。实际执行于 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1032922" title='RESOLVED FIXED - Rename "flex-basis:auto" to "main-size", while preserving "flex:auto" shorthand value'>bug 1032922</a>.</li>
+  <li>然后呢, 这个更改又在 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093316" title='RESOLVED FIXED - Back out flexbox "flex-basis:main-size" rename, since the CSSWG removed it from the spec'>bug 1093316</a> 中被撤销了, 所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 ({{bug("1105111")}} 包括了增加这个关键字).</li>
+ </ul>
+ </div>
+ </dd>
+</dl>
+
+<h3 id="规范">规范</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&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>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css">.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: 20px;
+  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: 18px;
+}
+
+.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/-webkit-fill-available/-moz-available';
+}
+</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample('例子', '860', '360', '', 'Web/CSS/flex-basis')}}</p>
+
+<h2 id="规格">规格</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th>规格</th>
+   <th>状态</th>
+   <th>评论</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>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p class="hidden">兼容性的表格数据生成在这个页面上。如果你构建这个数据，请检出这个仓库 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 然后给我们提交一个 pull request</p>
+
+<div class="note"></div>
+
+<p>{{Compat("css.properties.flex-basis")}}</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>CSS 弹性盒子指南: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a></em></li>
+ <li>CSS 弹性盒子指南: <em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlling Ratios of flex items along the main axis</a></em></li>
+ <li>{{cssxref("width")}}</li>
+</ul>