简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex布局涉及到的12个属性和实例

flex布局涉及到的12个属性和实例

樊天龙的博客
樊天龙的博客原创
2020年04月13日 17:09:08897浏览

flex布局涉及到的12个属性和实例

1.为什么要使用flex布局?

flex意为弹性布局,布局元素大小在flex容器中自动伸缩,以适应容器的变化,特别适合响应式布局

2.容器上的6个属性

序号 名称 描述
1. flex-direction 主轴方向
2. flex-wrap 主轴上项目换行方式
3. flex-flow 主轴方向和主轴上的项目换行方式的复合属性
4. justify-content 主轴上的项目对齐方式
5. align-items 交叉轴上的项目对齐方式(适用于单行容器)
6. align-content 交叉轴上的项目对齐方式(适用于多行容器)

2.1主轴方向flex-direction

2.1.1源代码

  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.             /* 将容器设置为flex容器 */
  10.             display: flex;
  11.             /* 设置主轴的方向,默认从左到右排列 */
  12.             flex-direction: row;
  13.             /* 主轴方向从右到左 */
  14.             /* flex-direction: row-reverse; */
  15.             /* 主轴方向从上到下 */
  16.             /* flex-direction: column; */
  17.             /* 主轴方向从下到上 */
  18.             /* flex-direction: column-reverse; */
  19.             width: 300px;
  20.             height: 150px;
  21.         }
  23.         .item {
  24.             width: 100px;
  25.             height: 100px;
  26.         }
  27.     </style>
  28.     <title>Document</title>
  29. </head>
  31. <body>
  32.     <div class="flex-container">
  33.         <div class="item">flex1</div>
  34.         <div class="item">flex2</div>
  35.         <div class="item">flex3</div>
  36.         <div class="item">flex4</div>
  37.     </div>
  38. </body>
  40. </html>

2.1.2效果图

2.2项目换行方式flex-wrap

2.2.1源代码

  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.             /* 设置主轴方向项目换行方式,默认不换行 */
  11.             flex-wrap: nowrap;
  12.             /* 换行 */
  13.             /* flex-wrap: wrap; */
  14.             /* 反向换行 */
  15.             /* flex-wrap: wrap-reverse; */
  16.             width: 300px;
  17.             height: 300px;
  18.         }
  20.         .item {
  21.             width: 100px;
  22.             height: 100px;
  23.         }
  24.     </style>
  25.     <title>Document</title>
  26. </head>
  28. <body>
  29.     <div class="flex-container">
  30.         <div class="item">flex1</div>
  31.         <div class="item">flex2</div>
  32.         <div class="item">flex3</div>
  33.         <div class="item">flex4</div>
  34.     </div>
  35. </body>
  37. </html>

2.2.2效果图

2.3flex-flow

2.3.1源代码

  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-flow:为flex-direction和flex-wrap的复合属性 */
  11.             flex-flow: row wrap;
  12.             width: 300px;
  13.             height: 300px;
  14.         }
  16.         .item {
  17.             width: 100px;
  18.             height: 100px;
  19.         }
  20.     </style>
  21.     <title>Document</title>
  22. </head>
  24. <body>
  25.     <div class="flex-container">
  26.         <div class="item">flex1</div>
  27.         <div class="item">flex2</div>
  28.         <div class="item">flex3</div>
  29.         <div class="item">flex4</div>
  30.     </div>
  31. </body>
  33. </html>

2.3.2效果图

2,4.主轴上的项目对齐方式justify-content

2.4.1源代码

  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: 500px;
  11.             height: 150px;
  12.             /* 主轴上项目对齐方式,默认左对齐 */
  13.             justify-content: flex-start;
  14.             /* 右对齐 */
  15.             /* justify-content: flex-end; */
  16.             /* 居中对齐 */
  17.             /* justify-content: center; */
  18.             /* 两端对齐 */
  19.             /* justify-content: space-between; */
  20.             /* 分散对齐,项目间距是两侧两倍 */
  21.             /* justify-content: space-around; */
  22.             /* 平均对齐 */
  23.             /* justify-content: space-evenly; */
  24.         }
  26.         .item {
  27.             width: 100px;
  28.             height: 100px;
  29.         }
  30.     </style>
  31.     <title>Document</title>
  32. </head>
  34. <body>
  35.     <div class="flex-container">
  36.         <div class="item">flex1</div>
  37.         <div class="item">flex2</div>
  38.         <div class="item">flex3</div>
  39.         <div class="item">flex4</div>
  40.     </div>
  41. </body>
  43. </html>

2.4.2效果图

2.5交叉轴上的项目对齐方式(适用于单行容器)align-items

2.5.1源代码

  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.             /* 交叉轴对齐方式,默认为起始线对齐 */
  11.             align-items: flex-start;
  12.             /* 终止线对齐 */
  13.             /* align-items: flex-end; */
  14.             /* 居中对齐 */
  15.             /* align-items: center; */
  16.             width: 400px;
  17.             height: 150px;
  18.         }
  20.         .item {
  21.             width: 100px;
  22.             height: 100px;
  23.         }
  24.     </style>
  25.     <title>Document</title>
  26. </head>
  28. <body>
  29.     <div class="flex-container">
  30.         <div class="item">flex1</div>
  31.         <div class="item">flex2</div>
  32.         <div class="item">flex3</div>
  33.         <div class="item">flex4</div>
  34.     </div>
  35. </body>
  37. </html>

2.5.2效果图

2.6交叉轴上的项目对齐方式(适用于多行容器)

2.6.1源代码

  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-flow: row wrap;
  11.             /* 多行容器项目交叉轴对齐方式,默认为stretch */
  12.             /* align-content: stretch; */
  13.             /* 起始线对齐 */
  14.             align-content: flex-start;
  15.             /* 终止线对齐 */
  16.             /* align-content: flex-end; */
  17.             /* 居中对齐 */
  18.             /* align-content: center; */
  19.             /* 两端对齐 */
  20.             /* align-content: space-between; */
  21.             /* 分散对齐 */
  22.             /* align-content: space-around; */
  23.             /* 平均对齐 */
  24.             /* align-content: space-evenly; */
  25.             width: 300px;
  26.             height: 300px;
  27.         }
  29.         .item {
  30.             width: 100px;
  31.             height: 100px;
  32.         }
  33.     </style>
  34.     <title>Document</title>
  35. </head>
  37. <body>
  38.     <div class="flex-container">
  39.         <div class="item">flex1</div>
  40.         <div class="item">flex2</div>
  41.         <div class="item">flex3</div>
  42.         <div class="item">flex4</div>
  43.     </div>
  44. </body>
  46. </html>

2.6.2效果图

效果图同主轴对齐方式

3.项目上的6个属性

序号 名称 描述
1. order 项目排序
2. align-self 交叉轴独立对齐方式
3.
3.
3.
3.

3.1项目排序order

3.1.1源代码

  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: 400px;
  11.             /* 项目排序,默认为0,支持负数
  12.                 数值越小排在前面
  13.              */
  14.             /* order: 0; */
  15.         }
  17.         .item {
  18.             width: 100px;
  19.             height: 100px;
  20.         }
  22.         .item:first-of-type {
  23.             order: 4;
  24.         }
  26.         .item:nth-of-type(2) {
  27.             order: 1;
  28.         }
  30.         .item:nth-of-type(3) {
  31.             /* 支持负数排序 */
  32.             order: -1;
  33.         }
  35.         .item:last-of-type {
  36.             order: 6;
  37.         }
  38.     </style>
  39.     <title>Document</title>
  40. </head>
  42. <body>
  43.     <div class="flex-container">
  44.         <div class="item">flex1</div>
  45.         <div class="item">flex2</div>
  46.         <div class="item">flex3</div>
  47.         <div class="item">flex4</div>
  48.     </div>
  49. </body>
  51. </html>

3.1.2效果图

4.总结

  • flex基础虽然已经掌握,但是实战中用的还是不是很熟练
  • 常用的属性可以写成复合属性,来简化代码
  • 后端学习时还可以再仔细研究和练习下
上一条：PDO和Mysqli对比分析与总结归纳下一条：flex布局（弹性布局）基础知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多