• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

192 - 布局技术 - 弹性布局 - 弹性项目的属性

作者：

贺及楼

成为作者

更新日期：2025-02-27 17:15:48

前端 - HTML5 《布局技术 - 弹性布局 - 弹性项目的属性》

在前端开发中，HTML5 的弹性布局（Flexbox）为我们提供了一种强大且灵活的方式来设计网页布局。弹性布局不仅可以轻松地处理元素的排列和对齐，还能根据不同的屏幕尺寸和设备进行自适应调整。在弹性布局中，除了弹性容器的属性外，弹性项目也有一系列重要的属性，这些属性可以进一步控制每个项目在容器中的具体表现。接下来，我们将详细介绍弹性项目的属性。

1. order 属性

作用

order 属性用于定义弹性项目的排列顺序。默认情况下，弹性项目按照它们在 HTML 代码中出现的顺序排列，而 order 属性可以改变这个顺序。数值越小的项目会越靠前排列，默认值为 0。

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .flex-container {
  9.       display: flex;
  10.     }
  12.    .flex-item {
  13.       width: 50px;
  14.       height: 50px;
  15.       margin: 5px;
  16.       background-color: lightblue;
  17.     }
  19.    .item1 {
  20.       order: 2;
  21.     }
  23.    .item2 {
  24.       order: 1;
  25.     }
  27.    .item3 {
  28.       order: 3;
  29.     }
  30.   </style>
  31.   <title>Order Property</title>
  32. </head>
  34. <body>
  35.   <div class="flex-container">
  36.     <div class="flex-item item1">1</div>
  37.     <div class="flex-item item2">2</div>
  38.     <div class="flex-item item3">3</div>
  39.   </div>
  40. </body>
  42. </html>

代码解释

在上述代码中，我们创建了一个弹性容器 .flex-container，并在其中放置了三个弹性项目。通过为每个项目设置不同的 order 值，我们改变了它们的排列顺序。item2 的 order 值为 1，所以它会排在最前面；item1 的 order 值为 2，排在第二位；item3 的 order 值为 3，排在最后。

2. flex-grow 属性

作用

flex-grow 属性定义了弹性项目在剩余空间分配时的增长比例。默认值为 0，表示项目不会增长。如果所有项目的 flex-grow 值都为 0，那么它们会按照自身的大小显示；如果有一个或多个项目的 flex-grow 值大于 0，那么剩余空间会按照这些项目的 flex-grow 值的比例进行分配。

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .flex-container {
  9.       display: flex;
  10.       width: 300px;
  11.       background-color: lightgray;
  12.     }
  14.    .flex-item {
  15.       height: 50px;
  16.       margin: 5px;
  17.       background-color: lightblue;
  18.     }
  20.    .item1 {
  21.       flex-grow: 1;
  22.     }
  24.    .item2 {
  25.       flex-grow: 2;
  26.     }
  28.    .item3 {
  29.       flex-grow: 1;
  30.     }
  31.   </style>
  32.   <title>Flex Grow Property</title>
  33. </head>
  35. <body>
  36.   <div class="flex-container">
  37.     <div class="flex-item item1">1</div>
  38.     <div class="flex-item item2">2</div>
  39.     <div class="flex-item item3">3</div>
  40.   </div>
  41. </body>
  43. </html>

代码解释

在这个例子中，我们创建了一个宽度为 300px 的弹性容器，并在其中放置了三个弹性项目。item1 和 item3 的 flex-grow 值为 1，item2 的 flex-grow 值为 2。当容器有剩余空间时，剩余空间会按照 1:2:1 的比例分配给这三个项目，所以 item2 会比 item1 和 item3 宽两倍。

3. flex-shrink 属性

作用

flex-shrink 属性定义了弹性项目在空间不足时的收缩比例。默认值为 1，表示项目会根据需要进行收缩。如果所有项目的 flex-shrink 值都为 1，那么它们会按照相同的比例收缩；如果某个项目的 flex-shrink 值为 0，那么它在空间不足时不会收缩。

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .flex-container {
  9.       display: flex;
  10.       width: 200px;
  11.       background-color: lightgray;
  12.     }
  14.    .flex-item {
  15.       width: 100px;
  16.       height: 50px;
  17.       margin: 5px;
  18.       background-color: lightblue;
  19.     }
  21.    .item1 {
  22.       flex-shrink: 1;
  23.     }
  25.    .item2 {
  26.       flex-shrink: 2;
  27.     }
  29.    .item3 {
  30.       flex-shrink: 1;
  31.     }
  32.   </style>
  33.   <title>Flex Shrink Property</title>
  34. </head>
  36. <body>
  37.   <div class="flex-container">
  38.     <div class="flex-item item1">1</div>
  39.     <div class="flex-item item2">2</div>
  40.     <div class="flex-item item3">3</div>
  41.   </div>
  42. </body>
  44. </html>

代码解释

在这个例子中，我们创建了一个宽度为 200px 的弹性容器，并在其中放置了三个宽度为 100px 的弹性项目。由于容器的宽度不足以容纳所有项目，项目会根据 flex-shrink 值进行收缩。item2 的 flex-shrink 值为 2，所以它会比 item1 和 item3 收缩得更多。

4. flex-basis 属性

作用

flex-basis 属性定义了弹性项目在分配剩余空间之前的初始大小。默认值为 auto，表示项目的初始大小由自身的宽度或高度决定。可以使用长度值（如像素、百分比等）或关键字（如 content）来指定 flex-basis 的值。

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .flex-container {
  9.       display: flex;
  10.       width: 300px;
  11.       background-color: lightgray;
  12.     }
  14.    .flex-item {
  15.       height: 50px;
  16.       margin: 5px;
  17.       background-color: lightblue;
  18.     }
  20.    .item1 {
  21.       flex-basis: 100px;
  22.     }
  24.    .item2 {
  25.       flex-basis: 50%;
  26.     }
  28.    .item3 {
  29.       flex-basis: auto;
  30.     }
  31.   </style>
  32.   <title>Flex Basis Property</title>
  33. </head>
  35. <body>
  36.   <div class="flex-container">
  37.     <div class="flex-item item1">1</div>
  38.     <div class="flex-item item2">2</div>
  39.     <div class="flex-item item3">3</div>
  40.   </div>
  41. </body>
  43. </html>

代码解释

在这个例子中，我们创建了一个宽度为 300px 的弹性容器，并在其中放置了三个弹性项目。item1 的 flex-basis 值为 100px，所以它的初始宽度为 100px；item2 的 flex-basis 值为 50%，所以它的初始宽度为容器宽度的 50%，即 150px；item3 的 flex-basis 值为 auto，它的初始宽度由自身内容决定。

5. flex 属性

作用

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写。使用 flex 属性可以更方便地同时设置这三个属性。默认值为 0 1 auto。

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .flex-container {
  9.       display: flex;
  10.       width: 300px;
  11.       background-color: lightgray;
  12.     }
  14.    .flex-item {
  15.       height: 50px;
  16.       margin: 5px;
  17.       background-color: lightblue;
  18.     }
  20.    .item1 {
  21.       flex: 1 1 100px;
  22.     }
  24.    .item2 {
  25.       flex: 2 2 50%;
  26.     }
  28.    .item3 {
  29.       flex: 1 1 auto;
  30.     }
  31.   </style>
  32.   <title>Flex Property</title>
  33. </head>
  35. <body>
  36.   <div class="flex-container">
  37.     <div class="flex-item item1">1</div>
  38.     <div class="flex-item item2">2</div>
  39.     <div class="flex-item item3">3</div>
  40.   </div>
  41. </body>
  43. </html>

代码解释

在这个例子中，我们使用 flex 属性同时设置了 flex-grow、flex-shrink 和 flex-basis。item1 的 flex 值为 1 1 100px，表示它的增长比例为 1，收缩比例为 1，初始大小为 100px；item2 的 flex 值为 2 2 50%，表示它的增长比例为 2，收缩比例为 2，初始大小为容器宽度的 50%；item3 的 flex 值为 1 1 auto，表示它的增长比例为 1，收缩比例为 1，初始大小由自身内容决定。

6. align-self 属性

作用

align-self 属性用于单独设置某个弹性项目在交叉轴上的对齐方式，它会覆盖弹性容器的 align-items 属性。默认值为 auto，表示继承容器的 align-items 属性。

演示代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.    .flex-container {
  9.       display: flex;
  10.       height: 200px;
  11.       background-color: lightgray;
  12.       align-items: center;
  13.     }
  15.    .flex-item {
  16.       width: 50px;
  17.       height: 50px;
  18.       margin: 5px;
  19.       background-color: lightblue;
  20.     }
  22.    .item1 {
  23.       align-self: flex-start;
  24.     }
  26.    .item2 {
  27.       align-self: flex-end;
  28.     }
  30.    .item3 {
  31.       align-self: center;
  32.     }
  33.   </style>
  34.   <title>Align Self Property</title>
  35. </head>
  37. <body>
  38.   <div class="flex-container">
  39.     <div class="flex-item item1">1</div>
  40.     <div class="flex-item item2">2</div>
  41.     <div class="flex-item item3">3</div>
  42.   </div>
  43. </body>
  45. </html>

代码解释

在这个例子中，我们创建了一个高度为 200px 的弹性容器，并设置了 align-items: center，表示所有项目在交叉轴上居中对齐。但是，我们通过 align-self 属性为每个项目单独设置了对齐方式。item1 的 align-self 值为 flex-start，所以它会在交叉轴的起始位置对齐；item2 的 align-self 值为 flex-end，所以它会在交叉轴的结束位置对齐；item3 的 align-self 值为 center，所以它会在交叉轴上居中对齐。

总结

属性 作用 默认值
order 定义弹性项目的排列顺序 0
flex-grow 定义弹性项目在剩余空间分配时的增长比例 0
flex-shrink 定义弹性项目在空间不足时的收缩比例 1
flex-basis 定义弹性项目在分配剩余空间之前的初始大小 auto
flex flex-grow、flex-shrink 和 flex-basis 的缩写 0 1 auto
align-self 单独设置某个弹性项目在交叉轴上的对齐方式 auto

通过掌握弹性项目的这些属性，我们可以更加灵活地控制弹性布局中每个项目的表现，从而创建出更加复杂和美观的网页布局。希望本文对你理解弹性布局中的弹性项目属性有所帮助！