1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
|
---
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>
<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">/* 指定<'width'> */
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"><'width'></a></code>.</p>
<h3 id="取值">取值</h3>
<dl>
<dt><code><'width'></code></dt>
<dd>
<p>width 值可以是 {{cssxref("<length>")}}; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的{{cssxref("<percentage>", "百分数")}} 。负值是不被允许的。默认为 <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>
{{csssyntax}}
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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>
<ul class="container">
<li class="flex flex6">6: flex-basis test</li>
</ul>
</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>
<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>
|
