flex-basis

# flex-basis

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

# uni-app x 兼容性

Web	Android	iOS	HarmonyOS
4.0	3.9	4.11	4.61

# 语法

flex-basis: content | <'width'>;

示例源码如下，请查看 pre > code 标签中的内容

flex-basis: content | <'width'>;

# 值限制

number
length
length-function
percentage

# flex-basis 的属性值

名称兼容性描述

auto

参照元素的 width 和 height 属性计算初始大小。

content

基于 flex 的元素的内容自动调整大小。

**备注：**由于最初规范中没有包括这个值，在一些早期的浏览器实现的 flex 布局中，content 值无效，可以利用设置 (width 或 height) 为 auto 达到同样的效果。

备注：简史

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

# 默认值

auto

# 示例

示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见

示例

<template>
  <view style="flex-grow: 1">
    <view>
      <text>flex-basis</text>
      <view style="
          width: 250px;
          height: 150px;
          background-color: gray;
          flex-direction: row;
        ">
        <view class="common" style="flex-basis: 150px">
          <text>150px</text>
        </view>
        <view style="width: 50px; height: 50px; background-color: green"></view>
        <view style="width: 50px; height: 50px; background-color: blue"></view>
      </view>
    </view>
  </view>
</template>

<style>
  .common {
    width: 50px;
    height: 50px;
    background-color: red;
    justify-content: center;
    align-items: center;
  }
</style>

示例源码如下，请查看 pre > code 标签中的内容

<template>
  <view style="flex-grow: 1">
    <view>
      <text>flex-basis</text>
      <view style="
          width: 250px;
          height: 150px;
          background-color: gray;
          flex-direction: row;
        ">
        <view class="common" style="flex-basis: 150px">
          <text>150px</text>
        </view>
        <view style="width: 50px; height: 50px; background-color: green"></view>
        <view style="width: 50px; height: 50px; background-color: blue"></view>
      </view>
    </view>
  </view>
</template>

<style>
  .common {
    width: 50px;
    height: 50px;
    background-color: red;
    justify-content: center;
    align-items: center;
  }
</style>