博主信息
豌豆君
博文
22
粉丝
0
评论
0
访问量
5877
积分:0
P豆:46

flex容器与项目的常用属性

2021年02月23日 18:10:15阅读数:169博客 / 豌豆君/ 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.支持负值
批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

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

条评论
  • 传统布局基于盒模型,依赖display、position、floatflex布局来为盒状模型提供最大灵活。设为display:flex元素成为,它子元素成为
    css3中让图像居中可以使【align-items:center】元素和【justify-content:center】元素。
    在css中,可以使margin系列来设置标签标签间距离。margin于设置元素外边距,是自身边框到另一个边框之间距离(即外距离),是隔开标签元素标签元素间距。
    uniapp实现选卡功能方法:首先写一个外框,把选卡固定在顶部使【display: flex】;然后使运算分别赋一个排序,如果选中则添加【inv-h-se】样式;最后写2个不同,使
    基础阶段要学习html标签表单控件、css基本样式及显示模式、选择、标签显示模式、css复合选择等等。
    java测试主要做是:1、了解java逻辑,进行规则测试;2、对进行非测试;3、写测试报告、测试例;4、不定时跟进;5、编写脚本。
    文件夹拒绝访问方法:1、右键点击文件夹,打开;2、进入安全栏,点击【高级】选;3、进入所有者栏,点击【编辑】选;4、选中所有者账户,勾选【替换子和对象所有者】选即可。
    vue.js是基于javascript于构建户界面渐进式框架,采MIT开源协议。Vue核心库只关注视图层,采自底向上增量开发设计,并且非易学习,非其它库或已有整合。
    vue是一套于构建户界面渐进式JavaScript框架,Vue核心库只关注视图层,并且非易学习,非其它库或已有整合。
    defer告诉浏览Script段包含了无需立即执行代码,并且SRC联合使,它还可以使这些脚本在后台被下载,前台则正显示给户;语法“<script defer>js代码&
    答案是非易学习,也非其它库或已有整合,那么,vue该怎么呢?今天在这里php中文网给大家推荐2021年最新5个vue.js免费视频教程供大家学习。
    适配模式于结构设计模式,它也是一种设计模式。适配模式适配模式很易理解,从字面意思就知道是来做适配
    devc++调字体大小方法:首先点击devc++上方栏“工具”栏;然后选择其中“编辑”;最后在弹出编辑界面中点击显示栏,并调整其中大小栏距即可。
    在CSS布局中float会被到,但使float后会使其在普通流中脱离父,让人很苦恼1 浮动带来布局便利,却也带来了新问题 1 2 3 4 5 Clear float 6 23 2
    jquery不支持浏览有IE6、IE7、IE8,这些低版本IE浏览在jQuery新版本中已经不被进行兼处理了;如果需要兼IE低版本,需要使jQuery1.x版本。
    在html中,使margin设置图片居中,只需要给图片元素设置“margin:auto”样式即可。
    选择神奇。它们可以使你摆脱棘手问题,帮助你避免添加类,并指出代码中一些问题。但是不要担心,虽然选择复杂和强大,但是它们很易学习和使
    选择神奇。它们可以使你摆脱棘手问题,帮助你避免添加类,并指出代码中一些问题。但是不要担心,虽然选择复杂和强大,但是它们很易学习和使
    小程序是现在非一个,它是一种全新连接服务方式,很多人都试着开发一个于自己小程序。那么我们个人该如何快速开发出于自己小程序呢?下面就为大家介绍一下几款小程序开发框架。
    pr软件是Premiere简称,由Adobe公司开发是一款视频编辑软件,有较好,且可以Adobe公司推出其他软件相互协作;前这款软件广泛应于广告制作和电视节制作中。