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

Flex(弹性布局)初体验

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

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;
  28. /* 设置主轴方向为垂直 */
  29. /* flex-direction: column; */
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="container">
  35. <span class="item">1</span>
  36. <span class="item">2</span>
  37. <span class="item">3</span>
  38. <span class="item">4</span>
  39. <span class="item">5</span>
  40. <span class="item">6</span>
  41. <span class="item">7</span>
  42. </div>
  43. </body>
  44. </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; */
  28. /* 设置主轴方向为垂直 */
  29. flex-direction: column;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="container">
  35. <span class="item">1</span>
  36. <span class="item">2</span>
  37. <span class="item">3</span>
  38. <span class="item">4</span>
  39. <span class="item">5</span>
  40. <span class="item">6</span>
  41. <span class="item">7</span>
  42. </div>
  43. </body>
  44. </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;
  29. /* 设置主轴方向为垂直 */
  30. /* flex-direction: column; */
  31. /* 2 是否多行展示 */
  32. /* 不允许多行展示 */
  33. flex-wrap: nowrap;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div class="container">
  39. <span class="item">1</span>
  40. <span class="item">2</span>
  41. <span class="item">3</span>
  42. <span class="item">4</span>
  43. <span class="item">5</span>
  44. <span class="item">6</span>
  45. <span class="item">7</span>
  46. </div>
  47. </body>
  48. </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;
  29. /* 设置主轴方向为垂直 */
  30. /* flex-direction: column; */
  31. /* 2 是否多行展示 */
  32. /* 不允许多行展示 */
  33. /* flex-wrap: nowrap; */
  34. /* 允许多行展示 */
  35. flex-wrap: wrap;
  36. }
  37. </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>

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;*/
  29. /* 设置主轴方向为垂直 */
  30. /* flex-direction: column; */
  31. /* 2 是否多行展示 */
  32. /* 不允许多行展示 */
  33. /* flex-wrap: nowrap; */
  34. /* 允许多行展示 */
  35. /* flex-wrap: wrap; */
  36. /* 3 flex-flow 是上面二个属性的简写,默认值 row wrap */
  37. flex-flow: row wrap;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="container">
  43. <span class="item">1</span>
  44. <span class="item">2</span>
  45. <span class="item">3</span>
  46. <span class="item">4</span>
  47. <span class="item">5</span>
  48. <span class="item">6</span>
  49. <span class="item">7</span>
  50. </div>
  51. </body>
  52. </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; */
  29. /* 设置主轴方向为垂直 */
  30. /* flex-direction: column; */
  31. /* 2 是否多行展示 */
  32. /* 不允许多行展示 */
  33. /* flex-wrap: nowrap; */
  34. /* 允许多行展示 */
  35. /* flex-wrap: wrap; */
  36. /* 3 flex-flow 是上面二个属性的简写,默认值 row wrap */
  37. flex-flow: row wrap;
  38. /* 4 设置容器中国的项目在主轴上的对齐方式 */
  39. /* justify-content: flex-start; 以第一个元素对齐 */
  40. /* justify-content: flex-end; 以最后一个元素对齐 */
  41. /* justify-content: center; 居中对齐 */
  42. /* justify-content: space-between; 两端对齐 */
  43. /* justify-content: space-around; 分散对齐 */
  44. /* justify-content: space-evenly; 平均对齐 */
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div class="container">
  50. <span class="item">1</span>
  51. <span class="item">2</span>
  52. <span class="item">3</span>
  53. <span class="item">4</span>
  54. <span class="item">5</span>
  55. <span class="item">6</span>
  56. <span class="item">7</span>
  57. </div>
  58. </body>
  59. </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; */
  29. /* 设置主轴方向为垂直 */
  30. /* flex-direction: column; */
  31. /* 2 是否多行展示 */
  32. /* 不允许多行展示 */
  33. /* flex-wrap: nowrap; */
  34. /* 允许多行展示 */
  35. /* flex-wrap: wrap; */
  36. /* 3 flex-flow 是上面二个属性的简写,默认值 row wrap */
  37. flex-flow: row wrap;
  38. /* 4 设置容器中国的项目在主轴上的对齐方式 */
  39. /* justify-content: flex-start; 以第一个元素对齐 */
  40. /* justify-content: flex-end; 以最后一个元素对齐 */
  41. /* justify-content: center; 居中对齐 */
  42. /* justify-content: space-between; 两端对齐 */
  43. /* justify-content: space-around; 分散对齐 */
  44. justify-content: space-evenly; /* 平均对齐 */
  45. /* 5 项目在交叉轴上的排列方式 */
  46. height: 300px;
  47. /* align-items: flex-start; 顶部对齐 */
  48. /* align-items: flex-end; 底部对齐 */
  49. /* align-items: center; 居中对齐 */
  50. }
  51. </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>

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; */
  29. /* 设置主轴方向为垂直 */
  30. /* flex-direction: column; */
  31. /* 2 是否多行展示 */
  32. /* 不允许多行展示 */
  33. /* flex-wrap: nowrap; */
  34. /* 允许多行展示 */
  35. /* flex-wrap: wrap; */
  36. /* 3 flex-flow 是上面二个属性的简写,默认值 row wrap */
  37. flex-flow: row wrap;
  38. /* 4 设置容器中国的项目在主轴上的对齐方式 */
  39. /* justify-content: flex-start; 以第一个元素对齐 */
  40. /* justify-content: flex-end; 以最后一个元素对齐 */
  41. /* justify-content: center; 居中对齐 */
  42. /* justify-content: space-between; 两端对齐 */
  43. /* justify-content: space-around; 分散对齐 */
  44. justify-content: space-evenly; /* 平均对齐 */
  45. /* 5 项目在交叉轴上的排列方式 */
  46. height: 300px;
  47. /* align-items: flex-start; 顶部对齐 */
  48. /* align-items: flex-end; 底部对齐 */
  49. /* align-items: center; 居中对齐 */
  50. /* 6 align-content 设置项目在多行容器交叉轴上的对齐方式 */
  51. /* align-content: space-between; 交叉轴上下对齐 */
  52. /* align-content: space-around;交叉轴上下分散对齐 */
  53. /* align-content: space-evenly; 交叉轴上下平均对齐 */
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div class="container">
  59. <span class="item">1</span>
  60. <span class="item">2</span>
  61. <span class="item">3</span>
  62. <span class="item">4</span>
  63. <span class="item">5</span>
  64. <span class="item">6</span>
  65. <span class="item">7</span>
  66. </div>
  67. </body>
  68. </html>

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

默写图片

默写

总结

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议