search

博客列表 >Flex(弹性布局)初体验

Flex(弹性布局)初体验

荔枝哥哥
荔枝哥哥原创
2019年12月24日 23:46:23660浏览

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布局，代码量比传统布局少

上一条：position的简单布局（12.20作业）--PHP培训十期线上班下一条：第十期FLEX容器属性案例+网站头部布局分析总结（2019-12-23）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多