Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > Flex(弹性布局)初体验
Blogger Information
Blog 7
fans 0
comment 1
visits 5428
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex(弹性布局)初体验
荔枝哥哥
Original
649 people have browsed it

Flex(弹性布局)初体验

实例

flex

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.              /* 设置主轴方向为水平 */
  27.             flex-direction: row;
  29.              /* 设置主轴方向为垂直 */
  30.             /* flex-direction: column; */
  31.         }
  32.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <span class="item">1</span>
  38.         <span class="item">2</span>
  39.         <span class="item">3</span>
  40.         <span class="item">4</span>
  41.         <span class="item">5</span>
  42.         <span class="item">6</span>
  43.         <span class="item">7</span>
  44.     </div>
  45. </body>
  46. </html>

row

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.              /* 设置主轴方向为水平 */
  27.             /* flex-direction: row; */
  29.              /* 设置主轴方向为垂直 */
  30.             flex-direction: column;
  31.         }
  32.     </style>
  34. </head>
  35. <body>
  36.     <div class="container">
  37.         <span class="item">1</span>
  38.         <span class="item">2</span>
  39.         <span class="item">3</span>
  40.         <span class="item">4</span>
  41.         <span class="item">5</span>
  42.         <span class="item">6</span>
  43.         <span class="item">7</span>
  44.     </div>
  45. </body>
  46. </html>

colunm

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.             /* 1 flex-direction设置主轴方向 */
  27.              /* 设置主轴方向为水平 */
  28.             flex-direction: row;
  30.              /* 设置主轴方向为垂直 */
  31.             /* flex-direction: column; */
  32.             /* 2 是否多行展示 */
  33.             /* 不允许多行展示 */
  34.             flex-wrap: nowrap;
  35.         }
  36.     </style>
  38. </head>
  39. <body>
  40.     <div class="container">
  41.         <span class="item">1</span>
  42.         <span class="item">2</span>
  43.         <span class="item">3</span>
  44.         <span class="item">4</span>
  45.         <span class="item">5</span>
  46.         <span class="item">6</span>
  47.         <span class="item">7</span>
  48.     </div>
  49. </body>
  50. </html>

nowrap
网页缩小他也不会换行

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.             /* 1 flex-direction设置主轴方向 */
  27.              /* 设置主轴方向为水平 */
  28.             flex-direction: row;
  30.              /* 设置主轴方向为垂直 */
  31.             /* flex-direction: column; */
  32.             /* 2 是否多行展示 */
  33.             /* 不允许多行展示 */
  34.             /* flex-wrap: nowrap; */
  35.             /* 允许多行展示 */
  36.             flex-wrap: wrap;
  38.         }
  39.     </style>
  41. </head>
  42. <body>
  43.     <div class="container">
  44.         <span class="item">1</span>
  45.         <span class="item">2</span>
  46.         <span class="item">3</span>
  47.         <span class="item">4</span>
  48.         <span class="item">5</span>
  49.         <span class="item">6</span>
  50.         <span class="item">7</span>
  51.     </div>
  52. </body>
  53. </html>

wrap

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.             /* 1 flex-direction设置主轴方向 */
  27.              /* 设置主轴方向为水平 */
  28.              /*flex-direction: row;*/
  30.              /* 设置主轴方向为垂直 */
  31.             /* flex-direction: column; */
  33.             /* 2 是否多行展示 */
  34.             /* 不允许多行展示 */
  35.             /* flex-wrap: nowrap; */
  36.             /* 允许多行展示 */
  37.             /* flex-wrap: wrap; */
  39.             /* 3 flex-flow 是上面二个属性的简写，默认值 row wrap */
  40.             flex-flow: row wrap; 
  42.         }
  43.     </style>
  45. </head>
  46. <body>
  47.     <div class="container">
  48.         <span class="item">1</span>
  49.         <span class="item">2</span>
  50.         <span class="item">3</span>
  51.         <span class="item">4</span>
  52.         <span class="item">5</span>
  53.         <span class="item">6</span>
  54.         <span class="item">7</span>
  55.     </div>
  56. </body>
  57. </html>

flex-flow
默认是主轴为水平排列，可以多行展示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.             /* 1 flex-direction设置主轴方向 */
  27.              /* 设置主轴方向为水平 */
  28.             /* flex-direction: row; */
  30.              /* 设置主轴方向为垂直 */
  31.             /* flex-direction: column; */
  33.             /* 2 是否多行展示 */
  34.             /* 不允许多行展示 */
  35.             /* flex-wrap: nowrap; */
  36.             /* 允许多行展示 */
  37.             /* flex-wrap: wrap; */
  39.             /* 3 flex-flow 是上面二个属性的简写，默认值 row wrap */
  40.             flex-flow: row wrap; 
  42.             /* 4 设置容器中国的项目在主轴上的对齐方式 */
  43.             /* justify-content: flex-start; 以第一个元素对齐 */
  44.             /* justify-content: flex-end; 以最后一个元素对齐 */
  45.             /* justify-content: center; 居中对齐 */
  46.             /* justify-content: space-between; 两端对齐 */
  47.            /* justify-content: space-around; 分散对齐 */
  48.             /* justify-content: space-evenly; 平均对齐 */ 
  49.         }
  50.     </style>
  52. </head>
  53. <body>
  54.     <div class="container">
  55.         <span class="item">1</span>
  56.         <span class="item">2</span>
  57.         <span class="item">3</span>
  58.         <span class="item">4</span>
  59.         <span class="item">5</span>
  60.         <span class="item">6</span>
  61.         <span class="item">7</span>
  62.     </div>
  63. </body>
  64. </html>

justify-content:flex-start
justify-content:flex-end
justify-content:center
justify-content:space-between
justify-content:space-around
justify-content:space-evenly
项目在交叉轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.             /* 1 flex-direction设置主轴方向 */
  27.              /* 设置主轴方向为水平 */
  28.             /* flex-direction: row; */
  30.              /* 设置主轴方向为垂直 */
  31.             /* flex-direction: column; */
  33.             /* 2 是否多行展示 */
  34.             /* 不允许多行展示 */
  35.             /* flex-wrap: nowrap; */
  36.             /* 允许多行展示 */
  37.             /* flex-wrap: wrap; */
  39.             /* 3 flex-flow 是上面二个属性的简写，默认值 row wrap */
  40.             flex-flow: row wrap; 
  42.             /* 4 设置容器中国的项目在主轴上的对齐方式 */
  43.             /* justify-content: flex-start; 以第一个元素对齐 */
  44.             /* justify-content: flex-end; 以最后一个元素对齐 */
  45.             /* justify-content: center; 居中对齐 */
  46.             /* justify-content: space-between; 两端对齐 */
  47.             /* justify-content: space-around; 分散对齐 */
  48.             justify-content: space-evenly; /* 平均对齐 */
  50.             /* 5 项目在交叉轴上的排列方式  */
  51.             height: 300px;
  52.             /* align-items: flex-start; 顶部对齐 */
  53.             /* align-items: flex-end; 底部对齐 */
  54.             /* align-items: center; 居中对齐 */
  55.         }
  56.     </style>
  58. </head>
  59. <body>
  60.     <div class="container">
  61.         <span class="item">1</span>
  62.         <span class="item">2</span>
  63.         <span class="item">3</span>
  64.         <span class="item">4</span>
  65.         <span class="item">5</span>
  66.         <span class="item">6</span>
  67.         <span class="item">7</span>
  68.     </div>
  69. </body>
  70. </html>

align-items:flex-start
align-items:flex-end
align-items:center
`交叉轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>flex_demo</title>
  8.     <style>
  9.         .container{
  10.             border: 1px dashed;
  11.             /* 只要盒子加了padding，border，就马上加上box-sizing */
  12.             box-sizing: border-box;
  13.             background-color: blue;
  14.         }
  15.         .item{
  16.             width: 100px;
  17.             height: 50px;
  18.             border: 1px dashed;
  19.             background-color: red;
  20.         }
  21.         .container{
  22.             /* 转换盒子为弹性盒子 */
  23.             display: flex;
  24.         }
  25.         .container{
  26.             /* 1 flex-direction设置主轴方向 */
  27.              /* 设置主轴方向为水平 */
  28.             /* flex-direction: row; */
  30.              /* 设置主轴方向为垂直 */
  31.             /* flex-direction: column; */
  33.             /* 2 是否多行展示 */
  34.             /* 不允许多行展示 */
  35.             /* flex-wrap: nowrap; */
  36.             /* 允许多行展示 */
  37.             /* flex-wrap: wrap; */
  39.             /* 3 flex-flow 是上面二个属性的简写，默认值 row wrap */
  40.             flex-flow: row wrap; 
  42.             /* 4 设置容器中国的项目在主轴上的对齐方式 */
  43.             /* justify-content: flex-start; 以第一个元素对齐 */
  44.             /* justify-content: flex-end; 以最后一个元素对齐 */
  45.             /* justify-content: center; 居中对齐 */
  46.             /* justify-content: space-between; 两端对齐 */
  47.             /* justify-content: space-around; 分散对齐 */
  48.             justify-content: space-evenly; /* 平均对齐 */
  50.             /* 5 项目在交叉轴上的排列方式  */
  51.             height: 300px;
  52.             /* align-items: flex-start; 顶部对齐 */
  53.             /* align-items: flex-end; 底部对齐 */
  54.             /* align-items: center; 居中对齐 */
  56.             /* 6 align-content 设置项目在多行容器交叉轴上的对齐方式 */
  57.             /* align-content: space-between; 交叉轴上下对齐 */
  58.             /* align-content: space-around;交叉轴上下分散对齐 */
  59.             /* align-content: space-evenly; 交叉轴上下平均对齐 */
  60.         }
  61.     </style>
  63. </head>
  64. <body>
  65.     <div class="container">
  66.         <span class="item">1</span>
  67.         <span class="item">2</span>
  68.         <span class="item">3</span>
  69.         <span class="item">4</span>
  70.         <span class="item">5</span>
  71.         <span class="item">6</span>
  72.         <span class="item">7</span>
  73.     </div>
  74. </body>
  75. </html>

lalign-content:space-between
align-content:space-around
align-content:space-evenly

默写图片

默写

总结

1 使用float``positon浮动与定位来做网页，如果网页的总体窗口大小更换了，你原来的布局就会乱掉
2 使用flex布局，如果网页的总体窗口大小更换了，整体网页布局还在可控范围内
3 使用flex布局，代码量比传统布局少

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex布局对一维方向元素对齐非常有效, 也很直观, 一定要掌握 , 这是现代布局技术的基础
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post