CSS Flexbox flex-basis - 易学教程，面试笔记经验！

CSS 属性

CSS flex-basis 属性设置主轴上 Flex 项目的初始大小，然后在 Flex 项目之间分配剩余空间。

当元素同时具有 Flex-basis（除 auto 之外）和宽度（或在 flex-direction:column 的情况下为高度）时，flex-basis 优先。

属性值

<width> − 特定的长度值，如像素（px）、百分比（%）等。
auto − 水平书写模式下的宽度值和垂直书写模式下的高度值；当两个值都是 auto 时，使用内容值。
max-content: 该值设置固有的首选宽度。
min-content: 该值设置固有的最小宽度。
fit-content: 设置容器内容区域的最大大小，限制在 min-content 和 max-content之间，并由元素的内容确定。
content: 它显示基于弹性项目内容的自动调整大小。

适用范围

Flex 项目，包括流入伪元素

语法

<width>

flex-basis: 10em;
flex-basis: 3px;
flex-basis: 50%;
flex-basis: auto;

内在大小调整keywords

flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

根据 Flex 项目的内容自动调整大小

flex-basis: content;

CSS flex-basis: <width>

以下示例演示了 flex-basis: 200px 属性将第三个 Flex 项目的初始大小设置为 200px -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: 200px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis: auto

以下示例演示了 flex-basis: auto 属性设置其内容的初始大小 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: auto;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis: max-content

以下示例演示了 flex-basis: max-content 属性设置内容的初始大小第三个弹性项目的大小 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: max-content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis: min-content

以下示例演示了 flex-basis: min-content 属性设置第三个 Flex 项目的初始大小为包含其内容所需的最小大小 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: min-content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis: fit-content

以下示例演示了 flex-basis: fit-content 属性将第三个 Flex 项目的初始大小设置为其内容的大小 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: fit-content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>

CSS flex-basis: content

以下示例演示了 flex- basic:内容属性根据弹性项目的大小自动确定其初始大小 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
   .flex-item {
      flex-basis: content;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div class="flex-item">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
   </div>
</body>
</html>