• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

190 - 布局技术 - 弹性布局 - Flexbox 简介

作者：

贺及楼

成为作者

更新日期：2025-02-27 16:31:22

布局技术 - 弹性布局 - Flexbox 简介

在前端开发中，页面布局是至关重要的一环。传统的布局方式（如浮动、定位等）在处理一些复杂的布局需求时，往往显得力不从心。而 HTML5 引入的 Flexbox（弹性盒子布局模型）为我们提供了一种更加灵活、高效的布局解决方案。本文将详细介绍 Flexbox 的基本概念、属性及其使用方法，并通过一些实用的例子帮助大家更好地理解和掌握。

什么是 Flexbox

Flexbox 是一种一维的布局模型，它可以在一个方向（水平或垂直）上灵活地排列和对齐元素。使用 Flexbox，我们可以轻松地控制元素的大小、顺序和对齐方式，而不需要依赖传统布局方式中的复杂计算和技巧。

要使用 Flexbox，我们需要将一个元素设置为弹性容器（Flex Container），然后将其直接子元素设置为弹性项目（Flex Items）。弹性容器会根据自身的属性和弹性项目的属性来决定如何排列和对齐这些项目。

基本概念

在深入了解 Flexbox 的属性之前，我们先了解几个基本概念：

主轴（Main Axis）和交叉轴（Cross Axis）

主轴是弹性容器中项目排列的主要方向，它可以是水平方向（默认）或垂直方向。交叉轴则是与主轴垂直的方向。

主轴起点（Main Start）和主轴终点（Main End）

主轴起点是主轴的起始位置，项目从这里开始排列。主轴终点是主轴的结束位置。

交叉轴起点（Cross Start）和交叉轴终点（Cross End）

交叉轴起点是交叉轴的起始位置，交叉轴终点是交叉轴的结束位置。

主轴尺寸（Main Size）和交叉轴尺寸（Cross Size）

主轴尺寸是项目在主轴方向上的大小，交叉轴尺寸是项目在交叉轴方向上的大小。

如何创建一个 Flex 容器

要创建一个 Flex 容器，只需要将元素的 display 属性设置为 flex 或 inline-flex：

  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.       background-color: lightblue;
  11.     }
  13.    .flex-item {
  14.       background-color: lightcoral;
  15.       margin: 10px;
  16.       padding: 20px;
  17.       font-size: 30px;
  18.     }
  19.   </style>
  20. </head>
  22. <body>
  23.   <div class="flex-container">
  24.     <div class="flex-item">1</div>
  25.     <div class="flex-item">2</div>
  26.     <div class="flex-item">3</div>
  27.   </div>
  28. </body>
  30. </html>

在上面的代码中，我们将一个 div 元素的 display 属性设置为 flex，使其成为一个弹性容器。容器内的三个 div 元素成为弹性项目，它们会在水平方向上依次排列。

Flex 容器属性

flex-direction

flex-direction 属性用于定义主轴的方向，它有四个可选值：

  • row：默认值，主轴为水平方向，项目从左到右排列。
  • row-reverse：主轴为水平方向，项目从右到左排列。
  • column：主轴为垂直方向，项目从上到下排列。
  • column-reverse：主轴为垂直方向，项目从下到上排列。
  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.       flex-direction: column;
  11.       background-color: lightblue;
  12.     }
  14.    .flex-item {
  15.       background-color: lightcoral;
  16.       margin: 10px;
  17.       padding: 20px;
  18.       font-size: 30px;
  19.     }
  20.   </style>
  21. </head>
  23. <body>
  24.   <div class="flex-container">
  25.     <div class="flex-item">1</div>
  26.     <div class="flex-item">2</div>
  27.     <div class="flex-item">3</div>
  28.   </div>
  29. </body>
  31. </html>

flex-wrap

flex-wrap 属性用于定义项目是否换行，它有三个可选值：

  • nowrap：默认值，项目不换行。
  • wrap：项目换行，第一行在上方。
  • wrap-reverse：项目换行，第一行在下方。
  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.       flex-wrap: wrap;
  11.       background-color: lightblue;
  12.       width: 200px;
  13.     }
  15.    .flex-item {
  16.       background-color: lightcoral;
  17.       margin: 10px;
  18.       padding: 20px;
  19.       font-size: 30px;
  20.     }
  21.   </style>
  22. </head>
  24. <body>
  25.   <div class="flex-container">
  26.     <div class="flex-item">1</div>
  27.     <div class="flex-item">2</div>
  28.     <div class="flex-item">3</div>
  29.     <div class="flex-item">4</div>
  30.   </div>
  31. </body>
  33. </html>

justify-content

justify-content 属性用于定义项目在主轴上的对齐方式，它有五个可选值：

  • flex-start：默认值，项目从主轴起点开始排列。
  • flex-end：项目从主轴终点开始排列。
  • center：项目在主轴上居中排列。
  • space-between：项目均匀分布，第一个项目在主轴起点，最后一个项目在主轴终点。
  • space-around：项目均匀分布，每个项目两侧的间隔相等。
  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.       justify-content: space-around;
  11.       background-color: lightblue;
  12.     }
  14.    .flex-item {
  15.       background-color: lightcoral;
  16.       margin: 10px;
  17.       padding: 20px;
  18.       font-size: 30px;
  19.     }
  20.   </style>
  21. </head>
  23. <body>
  24.   <div class="flex-container">
  25.     <div class="flex-item">1</div>
  26.     <div class="flex-item">2</div>
  27.     <div class="flex-item">3</div>
  28.   </div>
  29. </body>
  31. </html>

align-items

align-items 属性用于定义项目在交叉轴上的对齐方式，它有五个可选值：

  • stretch：默认值，项目在交叉轴上拉伸以填满容器。
  • flex-start：项目在交叉轴起点对齐。
  • flex-end：项目在交叉轴终点对齐。
  • center：项目在交叉轴上居中对齐。
  • baseline：项目在基线对齐。
  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.       align-items: center;
  11.       height: 200px;
  12.       background-color: lightblue;
  13.     }
  15.    .flex-item {
  16.       background-color: lightcoral;
  17.       margin: 10px;
  18.       padding: 20px;
  19.       font-size: 30px;
  20.     }
  21.   </style>
  22. </head>
  24. <body>
  25.   <div class="flex-container">
  26.     <div class="flex-item">1</div>
  27.     <div class="flex-item">2</div>
  28.     <div class="flex-item">3</div>
  29.   </div>
  30. </body>
  32. </html>

align-content

align-content 属性用于定义多行项目在交叉轴上的对齐方式，它有六个可选值：

  • stretch：默认值，多行项目在交叉轴上拉伸以填满容器。
  • flex-start：多行项目在交叉轴起点对齐。
  • flex-end：多行项目在交叉轴终点对齐。
  • center：多行项目在交叉轴上居中对齐。
  • space-between：多行项目均匀分布，第一行在交叉轴起点，最后一行在交叉轴终点。
  • space-around：多行项目均匀分布，每行两侧的间隔相等。
  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.       flex-wrap: wrap;
  11.       align-content: space-between;
  12.       height: 300px;
  13.       background-color: lightblue;
  14.     }
  16.    .flex-item {
  17.       background-color: lightcoral;
  18.       margin: 10px;
  19.       padding: 20px;
  20.       font-size: 30px;
  21.     }
  22.   </style>
  23. </head>
  25. <body>
  26.   <div class="flex-container">
  27.     <div class="flex-item">1</div>
  28.     <div class="flex-item">2</div>
  29.     <div class="flex-item">3</div>
  30.     <div class="flex-item">4</div>
  31.     <div class="flex-item">5</div>
  32.     <div class="flex-item">6</div>
  33.   </div>
  34. </body>
  36. </html>

Flex 项目属性

order

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.       background-color: lightblue;
  11.     }
  13.    .flex-item {
  14.       background-color: lightcoral;
  15.       margin: 10px;
  16.       padding: 20px;
  17.       font-size: 30px;
  18.     }
  20.    .item2 {
  21.       order: -1;
  22.     }
  23.   </style>
  24. </head>
  26. <body>
  27.   <div class="flex-container">
  28.     <div class="flex-item">1</div>
  29.     <div class="flex-item item2">2</div>
  30.     <div class="flex-item">3</div>
  31.   </div>
  32. </body>
  34. </html>

flex-grow

flex-grow 属性用于定义项目的放大比例，默认值为 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.       background-color: lightblue;
  11.     }
  13.    .flex-item {
  14.       background-color: lightcoral;
  15.       margin: 10px;
  16.       padding: 20px;
  17.       font-size: 30px;
  18.     }
  20.    .item2 {
  21.       flex-grow: 2;
  22.     }
  23.   </style>
  24. </head>
  26. <body>
  27.   <div class="flex-container">
  28.     <div class="flex-item">1</div>
  29.     <div class="flex-item item2">2</div>
  30.     <div class="flex-item">3</div>
  31.   </div>
  32. </body>
  34. </html>

flex-shrink

flex-shrink 属性用于定义项目的缩小比例，默认值为 1，表示可以缩小。

flex-basis

flex-basis 属性用于定义项目在主轴上的初始大小，默认值为 auto。

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的缩写，默认值为 0 1 auto。

align-self

align-self 属性用于定义单个项目在交叉轴上的对齐方式，它的可选值与 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: lightblue;
  12.     }
  14.    .flex-item {
  15.       background-color: lightcoral;
  16.       margin: 10px;
  17.       padding: 20px;
  18.       font-size: 30px;
  19.     }
  21.    .item2 {
  22.       align-self: flex-end;
  23.     }
  24.   </style>
  25. </head>
  27. <body>
  28.   <div class="flex-container">
  29.     <div class="flex-item">1</div>
  30.     <div class="flex-item item2">2</div>
  31.     <div class="flex-item">3</div>
  32.   </div>
  33. </body>
  35. </html>

总结

属性类型 属性名称 作用
容器属性 flex-direction 定义主轴方向
容器属性 flex-wrap 定义项目是否换行
容器属性 justify-content 定义项目在主轴上的对齐方式
容器属性 align-items 定义项目在交叉轴上的对齐方式
容器属性 align-content 定义多行项目在交叉轴上的对齐方式
项目属性 order 定义项目的排列顺序
项目属性 flex-grow 定义项目的放大比例
项目属性 flex-shrink 定义项目的缩小比例
项目属性 flex-basis 定义项目在主轴上的初始大小
项目属性 flex flex-grow、flex-shrink 和 flex-basis 的缩写
项目属性 align-self 定义单个项目在交叉轴上的对齐方式

Flexbox 为我们提供了一种强大而灵活的布局方式，通过合理运用容器属性和项目属性，我们可以轻松实现各种复杂的布局需求。希望本文能帮助你更好地理解和掌握 Flexbox 布局技术。