CSS Flexbox 中的 flex 属性详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，CSS Flexbox 已经成为了布局的主流技术。而其中的 flex 属性更是不可或缺的一部分。在本篇文章中，我们将对 flex 属性进行详细的讲解，包括其用法、属性值以及实际应用。

flex 属性的用法

在使用 Flexbox 进行布局时，我们需要将容器设置为 display: flex，然后再通过 flex 属性控制子元素的排列。flex 属性可以应用于子元素，也可以应用于容器本身。下面是 flex 属性的基本语法：

.container {
  display: flex;
}

.item {
  flex: value;
}

其中，.container 表示容器，.item 表示子元素，value 表示属性值。接下来我们将详细介绍 flex 属性的属性值。

flex 属性的属性值

flex 属性有三个属性值，分别是 flex-grow、flex-shrink 和 flex-basis，它们分别用于控制子元素的伸缩比例、收缩比例和基准值。

flex-grow

flex-grow 属性用于控制子元素的伸缩比例。它的属性值是一个非负整数，表示子元素在剩余空间中所占的比例。如果一个子元素的 flex-grow 值为 2，而另一个子元素的 flex-grow 值为 1，那么前者将会占据剩余空间的 2/3，后者则占据剩余空间的 1/3。

下面是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

<style>
.container {
  display: flex;
}

.item-1 {
  flex-grow: 1;
}

.item-2 {
  flex-grow: 2;
}

.item-3 {
  flex-grow: 3;
}
</style>

在上面的示例中，.item-1 的 flex-grow 值为 1，.item-2 的 flex-grow 值为 2，.item-3 的 flex-grow 值为 3。因此，.item-1、.item-2 和 .item-3 分别占据剩余空间的 1/6、2/6 和 3/6。

flex-shrink

flex-shrink 属性用于控制子元素的收缩比例。它的属性值是一个非负整数，表示子元素在空间不足时所占的比例。如果一个子元素的 flex-shrink 值为 2，而另一个子元素的 flex-shrink 值为 1，那么前者将会收缩的比例是后者的两倍。

下面是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

<style>
.container {
  display: flex;
}

.item-1 {
  flex-shrink: 1;
}

.item-2 {
  flex-shrink: 2;
}

.item-3 {
  flex-shrink: 3;
}
</style>

在上面的示例中，.item-1 的 flex-shrink 值为 1，.item-2 的 flex-shrink 值为 2，.item-3 的 flex-shrink 值为 3。如果容器的宽度不足以容纳所有子元素，那么.item-3 将会比 .item-2 和 .item-1 更快地收缩。

flex-basis

flex-basis 属性用于控制子元素的基准值。它的属性值可以是一个长度值或者一个百分比值，表示子元素的初始大小。如果一个子元素的 flex-basis 值为 100px，而另一个子元素的 flex-basis 值为 50%，那么前者的初始大小为 100px，后者的初始大小为容器宽度的一半。

下面是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

<style>
.container {
  display: flex;
}

.item-1 {
  flex-basis: 100px;
}

.item-2 {
  flex-basis: 50%;
}

.item-3 {
  flex-basis: 200px;
}
</style>

在上面的示例中，.item-1 的 flex-basis 值为 100px，.item-2 的 flex-basis 值为 50%，.item-3 的 flex-basis 值为 200px。因此，.item-1 的初始大小为 100px，.item-2 的初始大小为容器宽度的一半，.item-3 的初始大小为 200px。

flex 属性的实际应用

在实际开发中，flex 属性可以用于实现各种布局效果。下面是一些常见的应用场景。

等分布局

通过设置子元素的 flex-grow 值为 1，可以实现等分布局。下面是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
  <div class="item item-3">item 3</div>
</div>

<style>
.container {
  display: flex;
}

.item {
  flex-grow: 1;
}
</style>

在上面的示例中，.item 的 flex-grow 值为 1，因此它们将会等分剩余空间。

左右布局

通过设置子元素的 flex-basis 值为 0，可以实现左右布局。下面是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
</div>

<style>
.container {
  display: flex;
}

.item {
  flex-basis: 0;
  flex-grow: 1;
}
</style>

在上面的示例中，.item 的 flex-basis 值为 0，因此它们的初始大小为 0。当它们占据了容器的一半后，它们的大小将会相等。

上下布局

通过设置容器的 flex-direction 值为 column，可以实现上下布局。下面是一个示例代码：

// javascriptcn.com 代码示例
<div class="container">
  <div class="item item-1">item 1</div>
  <div class="item item-2">item 2</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
}

.item {
  flex-basis: 0;
  flex-grow: 1;
}
</style>

在上面的示例中，.container 的 flex-direction 值为 column，因此它们将会上下排列。

总结

通过本文的学习，我们了解了 flex 属性的用法、属性值以及实际应用。希望本文对你有所帮助，也希望你能够在实际开发中灵活运用 Flexbox 技术，实现更加优秀的布局效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657022c8d2f5e1655d8d1071