1. Web
  2. CSS
  3. flex-basis

flex-basis

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 2015 年 9 月以來，該特性已在各大瀏覽器中可用。

flex-basis CSS 屬性設定 彈性專案 的初始主尺寸。它設定內容框的大小，除非透過 box-sizing 另行設定。

注意： 建議使用 flex 縮寫，並帶有像 auto 或 initial 這樣的關鍵字值，而不是單獨設定 flex-basis。這些關鍵字值擴充套件為 flex-grow、flex-shrink 和 flex-basis 的可靠組合，有助於實現通常所需的彈性行為。

試一試

flex-basis: auto;

flex-basis: 0;

flex-basis: 200px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">Item One</div>
  <div>Item Two</div>
  <div>Item Three</div>
</section>

.default-example {
  border: 1px solid #c5c5c5;
  width: auto;
  max-height: 300px;
  display: flex;
}

.default-example > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

在此示例中，flex-grow 和 flex-shrink 屬性在所有三個專案上都設定為 1，表示彈性專案可以從初始 flex-basis 增長和收縮。

此演示更改了設定在第一個彈性專案上的 flex-basis 值，使其增長或收縮以填充可用空間。其他彈性專案也會改變大小；它們至少為 min-content 大小。例如，當第一個專案的 flex-basis 設定為 200px 時，它將從 200px 開始，但隨後會收縮以適應可用空間。

如果 flex-basis 設定為 auto 以外的值，並且該彈性專案也設定了 width（或 flex-direction: column 情況下的 height），則 flex-basis 值優先。

語法

css
/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item's content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: revert;
flex-basis: revert-layer;
flex-basis: unset;

flex-basis 屬性被指定為關鍵字 content 或 <'width'>。

值

content

表示基於彈性專案內容自動調整大小。

<'width'>

以下任何單位：

  • <length> 設定絕對值。
  • <percentage> 設定包含塊內容區域寬度或高度的百分比。flex-basis 的百分比值根據彈性容器解析。如果彈性容器的大小不確定，則 flex-basis 的使用值是 content。
  • auto 在水平書寫模式下使用 width 的值，在垂直書寫模式下使用 height 的值；當相應值也為 auto 時，則使用 content 值。
  • max-content 設定固有的首選寬度。
  • min-content 設定固有的最小寬度。
  • fit-content 設定包含塊內容區域的最大可能大小，受 min-content 和 max-content 值限制，並根據當前元素的內容計算。

正式定義

初始值auto
應用於彈性專案，包括在流中的偽元素
繼承性否
百分比指彈性容器的內部主尺寸。
計算值按指定值，但相對長度會轉換為絕對長度。
動畫型別一個長度、百分比或 calc()；

正式語法

flex-basis = 
  content    |
  <'width'>  

<width> = 
  auto                                      |
  <length-percentage [0,∞]>                 |
  min-content                               |
  max-content                               |
  fit-content( <length-percentage [0,∞]> )  |
  <calc-size()>                             |
  <anchor-size()>                           |
  stretch                                   |
  fit-content                               |
  contain                                   

<length-percentage> = 
  <length>      |
  <percentage>  

<calc-size()> = 
  calc-size( <calc-size-basis> , <calc-sum> )  

<anchor-size()> = 
  anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )  

<calc-size-basis> = 
  <size-keyword>  |
  <calc-size()>   |
  any             |
  <calc-sum>      

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*  

<anchor-name> = 
  <dashed-ident>  

<anchor-size> = 
  width        |
  height       |
  block        |
  inline       |
  self-block   |
  self-inline  

<calc-product> = 
  <calc-value> [ [ '*' | / ] <calc-value> ]*  

<calc-value> = 
  <number>        |
  <dimension>     |
  <percentage>    |
  <calc-keyword>  |
  ( <calc-sum> )  

<calc-keyword> = 
  e          |
  pi         |
  infinity   |
  -infinity  |
  NaN

示例

設定彈性專案的初始尺寸。

HTML

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

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: 14px;
  text-align: center;
  position: relative;
}

.flex::after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333333;
  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";
}

結果

Flex basis 0 與 0%

此示例演示了當 flex-direction 設定為 column 且彈性容器和彈性專案沒有設定高度時，flex-basis 為 0 與 flex-basis 為 0% 之間的區別；雖然 0 是絕對長度，但百分比 flex-basis 值解析為 content 值。

HTML

我們包含兩個結構相同的彈性容器，它們將以類似的方式進行樣式設定，除了它們的 flex-basis 值。每個容器都有兩個子元素：一個標題 <div> 和一個 <section>。<section> 元素有一個內容 <div> 子元素，它不會被設定為彈性專案，但會給定一個高度。

html
<div class="container basis-0">
  <div>heading</div>
  <section>
    flex-basis: 0;
    <div class="content"></div>
  </section>
</div>
<div class="container basis-0-percent">
  <div>heading</div>
  <section>
    flex-basis: 0%;
    <div class="content"></div>
  </section>
</div>

CSS

我們將容器樣式設定為並排顯示的行內彈性容器，以便更好地比較它們。我們將 flex-direction 設定為 column。第一個容器的彈性專案具有 flex-basis 值 0，而第二個容器的彈性專案具有 flex-basis 值 0%。彈性容器及其彈性專案都沒有明確設定高度，但 section 元素的高度不能超過 200px，並且其子元素的高度為 300px。

css
.container {
  width: 40vw;
  padding: 1rem;
  border: 1px dashed blue;

  display: inline-flex;
  flex-direction: column;
}

section {
  border: 1px solid red;

  overflow: auto;
  min-height: 200px;
}

.content {
  background: wheat;
  height: 300px;
}

.container.basis-0 > * {
  flex-basis: 0;
}
.container.basis-0-percent > * {
  flex-basis: 0%;
}

結果

在第一個容器中，flex-basis: 0，<section> 元素的初始主尺寸為零，它增長到 200px 的高度限制。在第二個容器中，flex-basis: 0%，<section> 元素的初始主尺寸為 300px，因為彈性容器沒有設定高度，百分比 flex-basis 值解析為 content 值。

規範

規範
CSS 彈性盒子佈局模組第 1 級
# flex-basis 屬性

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.