From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/flex-basis/index.html | 215 ++++++++++++++++++++++++++++++ 1 file changed, 215 insertions(+) create mode 100644 files/zh-cn/web/css/flex-basis/index.html (limited to 'files/zh-cn/web/css/flex-basis') 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 +--- +
{{CSSRef}}
+ +

CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用  {{Cssxref("box-sizing")}} 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ +
+ + + +
+

Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级.

+
+ +

语法

+ +
/* 指定<'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;
+
+ +

这个 flex-basis 属性 被指定为关键词 content 或者 <'width'>.

+ +

取值

+ +
+
<'width'>
+
+

width 值可以是 {{cssxref("<length>")}}; 该值也可以是一个相对于其父弹性盒容器主轴尺寸的{{cssxref("<percentage>", "百分数")}} 。负值是不被允许的。默认为 auto。

+
+
content
+
基于 flex 的元素的内容自动调整大小。
+
+
Note:由于最初规范中没有包括这个值，在一些早期的浏览器实现的flex布局中，content值无效，可以利用设置(width 或 height) 为 auto达到同样的效果.
+ +
+

Note:简史

+ +
    +
  • 最初, "flex-basis:auto" 的含义是 "参照我的width和height属性".
    • +
  • 在此之后, "flex-basis:auto" 的含义变成了自动尺寸, 而 "main-size" 变成了 "参照我的width和height属性"。实际执行于 bug 1032922.
    • +
  • 然后呢, 这个更改又在 bug 1093316 中被撤销了, 所以 "auto" 变回了原来的含义; 而一个新的关键字 'content' 变成了自动尺寸。 ({{bug("1105111")}} 包括了增加这个关键字).
    • +
+
+
+
+ +

规范

+ +
{{csssyntax}}
+ +

例子

+ +

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>
+
+ +

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';
+}
+
+ +

结果

+ +

{{EmbedLiveSample('例子', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

规格

+ + + + + + + + + + + + + + + + +
规格状态评论
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}初始化定义
+ +

{{cssinfo}}

+ +

浏览器兼容性

+ + + +
+ +

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

+ +

参见

+ + -- cgit v1.2.3-54-g00ecf