flex容器与项目的常用属性

2021年02月23日 18:10:15阅读数:24博客 / 豌豆君 / html

定位布局的常用思路 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>定位布局的常用思路</title>
  7. <style>
  8. /* 初始化 */
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. /* 页眉页脚 */
  15. header,footer {
  16. height: 3em;
  17. background-color: lightgreen;
  18. }
  19. /* 主体部分采用绝对定位 */
  20. .container {
  21. /* 定位元素 */
  22. position: relative;
  23. min-height: 40em;
  24. margin: 0.5em 0;
  25. }
  26. .container aside {
  27. width: 15em;
  28. background-color: lightskyblue;
  29. min-height: inherit;
  30. }
  31. /* 左中右全部进行绝对定位 */
  32. .container aside:first-of-type{
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. }
  37. .container aside:last-of-type{
  38. position: absolute;
  39. top: 0;
  40. right: 0;
  41. }
  42. .container main{
  43. min-height: inherit;
  44. position: absolute;
  45. background-color: yellow;
  46. /* padding: 0 15em; */
  47. left: 15.5em;
  48. right: 15.5em;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <header>页眉</header>
  54. <div class="container">
  55. <aside>左侧</aside>
  56. <main>内容区</main>
  57. <aside>右侧</aside>
  58. </div>
  59. <footer>页脚</footer>
  60. </body>
  61. </html>

效果:

flex快速实现水平和垂直居中 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>flex快速实现水平和垂直居中</title>
  7. <style>
  8. .box {
  9. width: 15em;
  10. height: 15em;
  11. background-color: lightseagreen;
  12. /* position: relative; */
  13. }
  14. .box .item {
  15. width: 5em;
  16. height: 5em;
  17. background-color: coral;
  18. }
  19. /* .box .item {
  20. position: absolute;
  21. top: 0;
  22. left: 0;
  23. right: 0;
  24. bottom: 0;
  25. margin: auto;
  26. } */
  27. .box {
  28. display: flex;
  29. justify-content: center;
  30. align-items: center;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div class="box">
  36. <div class="item">
  37. </div>
  38. </div>
  39. </body>
  40. </html>

效果:

flex实现常用的三列布局 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>flex实现常用的三列布局</title>
  7. <style>
  8. /* 从body的所有后代匹配的元素中,去掉某些元素 */
  9. body *:not(.container) {
  10. background-color: lightseagreen;
  11. }
  12. header,
  13. footer {
  14. height: 8vh;
  15. }
  16. .container {
  17. display: flex;
  18. margin: 0.5em 0;
  19. height: calc(84vh - 2em);
  20. }
  21. .container aside {
  22. min-width: 15em;
  23. }
  24. .container main {
  25. min-width: calc(100% - 30em - 1em);
  26. margin: 0 0.5em;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <header>页眉</header>
  32. <div class="container">
  33. <aside>左侧</aside>
  34. <main>内容区</main>
  35. <aside>右侧</aside>
  36. </div>
  37. <footer>页脚</footer>
  38. </body>
  39. </html>

效果:

grid实现常用的三列布局 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>grid实现常用的三列布局</title>
  7. <style>
  8. body {
  9. height: calc(100vh - 1em);
  10. display: grid;
  11. grid-template-columns: 15em 1fr 15em;
  12. grid-template-rows: 8vh 1fr 8vh;
  13. gap: 0.5em;
  14. }
  15. header, footer {
  16. grid-column: span 3;
  17. }
  18. body>*{
  19. background-color: lightseagreen;
  20. }
  21. /* grid 虽然强大无比,但不代表到处都要用到它,它更适合整体/宏观布局,而flex适合细节处理 */
  22. </style>
  23. </head>
  24. <body>
  25. <header>页眉</header>
  26. <aside>左侧</aside>
  27. <main>内容区</main>
  28. <aside>右侧</aside>
  29. <footer>页脚</footer>
  30. </body>
  31. </html>

效果:

弹性容器与弹性项目 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>弹性容器与弹性项目</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. }
  19. .container>.item {
  20. height: 2em;
  21. width: 5em;
  22. background-color: lightcyan;
  23. border: 1px solid black;
  24. }
  25. /* 1.任何元素都可以通过添加display: flex属性,转为弹性盒元素
  26. 2.转为flex元素后,它的内部的“子元素”就支持flex布局了
  27. 3.使用了display: flex属性的元素称为: flex容器
  28. 4.flex 容器中的“子元素”称为: flex项目
  29. 5.容器中的项目自动转为“行内块元素”(不管之前是什么类型) */
  30. .container>.item:nth-child(4) {
  31. display: flex;
  32. }
  33. .container>.item:nth-child(4)>div{
  34. background-color: yellow;
  35. }
  36. /* 工作中会存在大量的flex容器的嵌套布局 */
  37. </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41. <div class="item">item1</div>
  42. <div class="item">item2</div>
  43. <div class="item">item3</div>
  44. <div class="item">item4
  45. <div>1</div>
  46. <div>2</div>
  47. <div>3</div>
  48. </div>
  49. </div>
  50. </body>
  51. </html>

效果:

弹性项目在主轴上的排列方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>弹性项目在主轴上的排列方式</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. }
  19. .container>.item {
  20. width: 5em;
  21. height: 5em;
  22. background-color: lightcyan;
  23. border: 1px solid black;
  24. }
  25. /* 1.单行容器 */
  26. .container {
  27. /* flex-direction: row;
  28. flex-wrap: nowrap; */
  29. flex-flow: row nowrap;
  30. }
  31. /* 2.多行容器:一行显示不下,允许换行显示 */
  32. .container {
  33. flex-flow: row wrap;
  34. }
  35. .container {
  36. flex-flow: column nowrap;
  37. flex-flow: column wrap;
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div class="container">
  43. <div class="item">item1</div>
  44. <div class="item">item2</div>
  45. <div class="item">item3</div>
  46. <div class="item">item4</div>
  47. <div class="item">item5</div>
  48. <div class="item">item6</div>
  49. <div class="item">item7</div>
  50. <div class="item">item8</div>
  51. </div>
  52. </body>
  53. </html>

效果:

弹性项目在单行上的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>弹性项目在单行上的对齐方式</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. }
  19. .container>.item {
  20. width: 5em;
  21. /* height: 5em; */
  22. background-color: lightcyan;
  23. border: 1px solid black;
  24. }
  25. /* 设置项目在单行容器主轴上的对齐前提:主轴上存在剩余空间 */
  26. .container {
  27. /* flex-flow: row nowrap; */
  28. /* 空间分配二种方案: */
  29. /* 1.将所有项目视为一个整体,在项目组二边进行分配 */
  30. justify-content: flex-start;
  31. justify-content: flex-end;
  32. justify-content: center;
  33. /* 2.将项目视为一个个独立的个体,在项目之间进行分配 */
  34. /* 二端对齐 */
  35. justify-content: space-between;
  36. /* 分散对齐 */
  37. justify-content: space-around;
  38. /* 平均对齐 */
  39. justify-content: space-evenly;
  40. }
  41. /* 交叉轴上的对齐方式 */
  42. .container {
  43. /* 默认拉伸 */
  44. align-items: stretch;
  45. align-items: flex-start;
  46. align-items: flex-end;
  47. align-items: center;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div class="container">
  53. <div class="item">item1</div>
  54. <div class="item">item2</div>
  55. <div class="item">item3</div>
  56. <div class="item">item4</div>
  57. </div>
  58. </body>
  59. </html>

效果:

弹性项目在多行上的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>弹性项目在多行上的对齐方式</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. }
  19. .container>.item {
  20. width: 5em;
  21. /* height: 5em; */
  22. background-color: lightcyan;
  23. border: 1px solid black;
  24. }
  25. .container {
  26. flex-flow: row wrap;
  27. align-content: stretch;
  28. align-content: flex-start;
  29. align-content: flex-end;
  30. align-content: center;
  31. align-content: space-between;
  32. align-content: space-around;
  33. align-content: space-evenly;
  34. }
  35. /* 容器属性:
  36. flex-flow: 主轴方向与换行
  37. justify-content: 项目在主轴上的对齐方式
  38. align-items:项目在交叉轴上的对齐方式
  39. align-content: 项目在多行容器中的交叉轴上的对齐方式 */
  40. </style>
  41. </head>
  42. <body>
  43. <div class="container">
  44. <div class="item">item1</div>
  45. <div class="item">item2</div>
  46. <div class="item">item3</div>
  47. <div class="item">item4</div>
  48. <div class="item">item5</div>
  49. <div class="item">item6</div>
  50. <div class="item">item7</div>
  51. <div class="item">item8</div>
  52. <div class="item">item9</div>
  53. <div class="item">item10</div>
  54. <div class="item">item11</div>
  55. <div class="item">item12</div>
  56. </div>
  57. </body>
  58. </html>

效果:

项目上的属性: flex 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>项目上的属性: flex</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. }
  19. .container>.item {
  20. width: 5em;
  21. /* height: 5em; */
  22. background-color: lightcyan;
  23. border: 1px solid black;
  24. }
  25. /* 项目属性flex */
  26. .container .item {
  27. /* flex: flex-grow flex-shrink flex-basis */
  28. /* flex: 放大因子 收缩因子 项目在主轴上的基准宽度 */
  29. flex: 0 1 auto;
  30. flex: initial;
  31. /* 允许放大和收缩 */
  32. flex: 1 1 auto;
  33. flex: auto;
  34. /* 禁止放大和收缩 */
  35. flex: 0 0 auto;
  36. flex: none;
  37. /* 如果只有一个数字,省掉后面二个参数,表示的放大因子 */
  38. flex: 1;
  39. /* 等于 flex: 1 1 auto; */
  40. flex: 2;
  41. flex: 3;
  42. /* flex 通常不会用来设置所有项目的默认选项,通常用来设置某一个项目的特征 */
  43. }
  44. /* 写一个案例,要求第2个 和 第3个项目的宽度是第1个和第4个2倍 */
  45. .container>.item:first-of-type,
  46. .container>.item:last-of-type {
  47. flex: 1;
  48. }
  49. .container>.item:nth-of-type(2),
  50. .container>.item:nth-of-type(2)+* {
  51. flex: 2;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <div class="container">
  57. <div class="item">item1</div>
  58. <div class="item">item2</div>
  59. <div class="item">item3</div>
  60. <div class="item">item4</div>
  61. </div>
  62. </body>
  63. </html>

效果:

设置某一个项目在交叉轴上的对齐方式 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>设置某一个项目在交叉轴上的对齐方式</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. position: relative;
  19. }
  20. .container>.item {
  21. width: 5em;
  22. /* height: 5em; */
  23. background-color: lightcyan;
  24. border: 1px solid black;
  25. }
  26. /* 例如设置第2个项目与其它项目的对齐方式不一样 */
  27. .container>.item:nth-of-type(2){
  28. align-self: stretch;
  29. align-self: flex-start;
  30. align-self: flex-end;
  31. align-self: center;
  32. /* position: relative; */
  33. position: absolute;
  34. left: -2em;
  35. top: 3em;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41. <div class="item">item1</div>
  42. <div class="item">item2</div>
  43. <div class="item">item3</div>
  44. <div class="item">item4</div>
  45. </div>
  46. </body>
  47. </html>

效果:

设置项目在主轴上的显示顺序 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>设置项目在主轴上的显示顺序</title>
  7. <style>
  8. * {
  9. box-sizing: border-box;
  10. }
  11. .container {
  12. /* 转为flex弹性布局元素 */
  13. display: flex;
  14. height: 15em;
  15. border: 1px solid black;
  16. padding: 1em;
  17. margin: 1em;
  18. position: relative;
  19. }
  20. .container>.item {
  21. width: 5em;
  22. /* height: 5em; */
  23. background-color: lightcyan;
  24. border: 1px solid black;
  25. }
  26. /* 显示顺序:默认按书写的源码顺序排列 */
  27. /* 默认序号越小越靠前,越大越靠后 */
  28. .container>.item:first-of-type {
  29. order: 1;
  30. order: 5;
  31. background-color: violet;
  32. }
  33. .container>.item:nth-of-type(2) {
  34. order: 2;
  35. background-color:turquoise;
  36. }
  37. .container>.item:nth-of-type(3) {
  38. order: 3;
  39. order: 0;
  40. background-color: royalblue;
  41. }
  42. .container>.item:nth-of-type(4) {
  43. order: 4;
  44. /* 支持负值 */
  45. order: -1;
  46. background-color: green;
  47. }
  48. /* 项目常用属性:
  49. flex: 设置基本项目的伸缩与宽度
  50. align-self: 某个项目的对齐方式
  51. order: 设置某个项目在主轴上的排列顺序 */
  52. </style>
  53. </head>
  54. <body>
  55. <div class="container">
  56. <div class="item">item1</div>
  57. <div class="item">item2</div>
  58. <div class="item">item3</div>
  59. <div class="item">item4</div>
  60. </div>
  61. </body>
  62. </html>

效果:

总结:

定位布局的常用思路:

  • 页眉,主体(左侧,内容区,右侧),页脚

弹性盒元素:

  • 通过添加display: flex属性来转换 (子元素自动转为“行内块元素”)

flex容器:

  • 使用了display: flex属性的元素 (flex容器可以嵌套)

flex项目:

  • flex 容器中的“子元素”

容器属性:

  • flex-flow: 主轴方向与换行
  • justify-content: 项目在主轴上的对齐方式
  • align-items:项目在交叉轴上的对齐方式
  • align-content: 项目在多行容器中的交叉轴上的对齐方式

单行容器:

  • flex-flow: row nowrap;

多行容器:

  • 一行显示不下,允许换行显示 flex-flow(row wrap 或 column wrap)

单行容器主轴上的对齐: justify-content (设置项目在单行容器主轴上的对齐前提:主轴上存在剩余空间)

  • 1.将所有项目视为一个整体,在项目组二边进行分配 (flex-start, flex-end, center)
  • 2.将项目视为一个个独立的个体,在项目之间进行分配 (space-between, space-around, space-evenly)

交叉轴上的对齐方式: align-items

  • ( stretch, flex-start, flex-end, center )

项目常用属性:

  • flex: 设置基本项目的伸缩与宽度
  • align-self: 某个项目的对齐方式
  • order: 设置某个项目在主轴上的排列顺序

flex属性: flex-grow(放大因子) flex-shrink(收缩因子) flex-basis(项目在主轴上的基准宽度)

  • 默认:flex: 0 1 auto; flex: initial;
  • 允许放大和收缩:flex: 1 1 auto; flex: auto;
  • 禁止放大和收缩: flex: 0 0 auto; flex: none;
  • 如果只有一个数字,省掉后面二个参数,表示的放大因子:flex: 1;等于 flex: 1 1 auto;

设置某一个项目在交叉轴上的对齐方式: align-self

  • ( stretch, flex-start, flex-end, center )

设置项目在主轴上的显示顺序: order

  • 1.显示顺序:默认按书写的源码顺序排列
  • 2.序号越小越靠前,越大越靠后
  • 3.支持负值
批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    豌豆君
    博文
    16
    粉丝
    0
    评论
    0
    访问量
    1688
    积分:0
    P豆:34