Flex弹性布局教程（03）：flex-basis设置主轴空间占比

Flex弹性布局简介

Flex布局（又称弹性盒布局）是一种强大的CSS布局模式，可让您轻松创建复杂且响应迅速的布局。它基于一个简单的概念：将容器中的项目放置在称为“轴”的水平或垂直方向上。轴上有两个维度：主轴和侧轴。主轴决定项目在容器中的排列方式，而侧轴决定项目在主轴上的排列方式。

Flex-basis属性

flex-basis属性允许您控制项目在主轴上占据的空间大小。您可以将其视为项目的初始大小，或者说它在分配任何剩余空间之前占据的空间大小。

flex-basis的语法

flex-basis的语法如下：

flex-basis: <length> | auto | inherit;

• <length>：一个具体的长度值，如“100px”或“50%”。
• auto：项目将占据其内容的自然大小。
• inherit：从父元素继承flex-basis值。

flex-basis的取值

flex-basis可以取以下几个值：

• auto：项目将占据其内容的自然大小。这是flex-basis的默认值。
• <length>：一个具体的长度值，如“100px”或“50%”。项目将占据这个特定的空间大小。
• 0：项目将不会占据任何空间。
• initial：项目将使用其初始的flex-basis值。
• inherit：项目将从父元素继承flex-basis值。

flex-basis的用法

flex-basis属性可以用来创建各种各样的布局。例如，您可以使用它来创建一个平均分配空间的项目列表，或者创建一个具有固定宽度的项目列表。

以下是一些flex-basis的用法示例：

• 创建一个平均分配空间的项目列表：

.items {
  display: flex;
  flex-direction: row;
  flex-basis: 0;
}

.item {
  flex: 1 0 auto;
}

在这个例子中，.items容器使用flex-basis: 0;，这样每个项目都会占据相同的空间。.item项目使用flex: 1 0 auto;，这意味着它们将占据所有剩余的空间，并根据需要进行扩展或收缩。

• 创建一个具有固定宽度的项目列表：

.items {
  display: flex;
  flex-direction: row;
}

.item {
  flex: 0 0 100px;
}

在这个例子中，.items容器使用flex-basis: auto;，这意味着每个项目都会占据其内容的自然大小。.item项目使用flex: 0 0 100px;，这意味着它们将占据固定的100像素宽度的空间。

结论

flex-basis属性是一个强大的工具，可让您控制项目在主轴上占据的空间大小。您可以使用它来创建各种各样的布局，从简单的项目列表到复杂的网格布局。