search

博客列表 >弹性布局之弹性元素（第七章1105作业）-PHP培训九期线上班

弹性布局之弹性元素（第七章1105作业）-PHP培训九期线上班

yany
yany原创
2019年12月24日 15:08:37527浏览

1、将课堂中的全部案例照写一遍，并达到默写级别

demo1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置弹性元素的增长因子</title>
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <body>
  9. <h1>设置弹性元素的增长因子</h1>
  10. <h3>1、所有弹性元素不增长，以原始宽度显示，增长因子为0（默认）</h3>
  11. <div class="container flex demo1">
  12.     <span class="item">item1</span>
  13.     <span class="item">item2</span>
  14.     <span class="item">item3</span>
  15. </div>
  16. <h3>2、将所有剩余空间分配给指定弹性元素，例如：第三个</h3>
  17. <div class="container flex demo2">
  18.     <span class="item">item1</span>
  19.     <span class="item">item2</span>
  20.     <span class="item">item3</span>
  21. </div>
  22. <h3>3、全部剩余空间按增长因子在不同弹性元素间分配</h3>
  23. <div class="container flex demo3">
  24.     <span class="item">item1</span>
  25.     <span class="item">item2</span>
  26.     <span class="item">item3</span>
  27. </div>
  28. <h3>4、增长因子支持小数，因为是按增长比例分配</h3>
  29. <div class="container flex demo4">
  30.     <span class="item">item1</span>
  31.     <span class="item">item2</span>
  32.     <span class="item">item3</span>
  33. </div>
  34. <h3>5、每个弹性元素宽度不同时，同样适用以上分配规律</h3>
  35. <div class="container flex demo5">
  36.     <span class="item">item1</span>
  37.     <span class="item">item2</span>
  38.     <span class="item">item3</span>
  39. </div>
  41. </body>
  42. </html>

style1.css

  1. @import"public.css";
  2. .container{
  3.     width: 550px;
  4. }
  5. .item{
  6.     width:100px;
  7. }
  8. .demo1>.item{
  9.     flex-grow: 0;
  10. }
  11. /*demo2将剩余空间分配给第三个元素*/
  12. .demo2>.item:first-of-type{
  13.     flex-grow: 0;
  14. }     
  15. .demo2>.item:nth-of-type(2){
  16.     flex-grow: 0;
  17. }
  18. .demo2>.item:last-of-type{
  19.     flex-grow:1
  20. }
  21. /*demo3将剩余空间按照增长因子比例分配，（550-100*3）/(总的增长因子）*每个元素所占的增长因子*/
  22. .demo3>.item:first-of-type{
  23.     flex-grow: 1;
  24. }
  25. .demo3>.item:nth-of-type(2){
  26.     flex-grow: 2;
  27. }
  28. .demo3>.item:last-of-type{
  29.     flex-grow: 5;
  30. }
  31. .demo4>.item:first-of-type{
  32.     flex-grow: 0.5;
  33. }
  34. .demo4>.item:nth-of-type(2){
  35.     flex-grow: 0.8;
  36. }
  37. .demo4>.item:last-of-type{
  38.     flex-grow: 2.3;
  39. }
  40. .demo5>.item:first-of-type{
  41.     width: 50px;
  42.     flex-grow: 2.5;
  43. }
  44. .demo5>.item:nth-of-type(2){
  45.     width: 150px;
  46.     flex-grow: 1.2;
  47. }
  48. .demo5>.item:last-of-type{
  49.     width:100px;
  50.     flex-grow: 1.8;
  51. }



demo2.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置弹性元素的缩减因子</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9. <h1>flex-shrink：设置弹性元素的缩减因子</h1>
  10. <h3>1、所有弹性元素不缩减，以原始宽度显示</h3>
  11. <div class="container flex demo1">
  12.     <span class="item">item1</span>
  13.     <span class="item">item2</span>
  14.     <span class="item">item3</span>
  15. </div>
  16. <h3>2、所有弹性元素自适应容器宽度且不换行，缩减因子：（默认）</h3>
  17. <div class="container flex demo2">
  18.     <span class="item">item1</span>
  19.     <span class="item">item2</span>
  20.     <span class="item">item3</span>
  21. </div>
  22. <h3>3、当三个弹性元素的缩减因子不相等时</h3>
  23. <div class="container flex demo3">
  24.     <span class="item">item1</span>
  25.     <span class="item">item2</span>
  26.     <span class="item">item3</span>
  27. </div>
  28. <h3>4、缩减因子也可以是小数，只要大于就可以</h3>
  29. <div class="container flex demo4">
  30.     <span class="item">item1</span>
  31.     <span class="item">item2</span>
  32.     <span class="item">item3</span>
  33. </div>
  34. <h3>5、当每个弹性元素宽度不一样时，完全是另一道风景线</h3>
  35. <div class="container flex demo5">
  36.     <span class="item">item1</span>
  37.     <span class="item">item2</span>
  38.     <span class="item">item3</span>
  39. </div>
  41. </body>
  42. </html>

style2.css

  1. @import"public.css";
  2. .container{
  3.     width: 550px;
  4. }
  5. .item{
  6.     width:300px;
  7. }
  8. .demo1>.item{
  9.     flex-shrink: 0;
  10. }
  11. .demo2>.item:first-of-type{
  12.     flex-shrink: 1;
  13. }
  14. .demo2>.item:nth-of-type(2){
  15.     flex-shrink: 1;
  16. }
  17. .demo2>.item:last-of-type{
  18.     flex-shrink: 1;
  19. }
  20. .demo3>.item:first-of-type{
  21.     flex-shrink: 10;
  22. }
  23. .demo3>.item:nth-of-type(2){
  24.     flex-shrink: 2;
  25. }
  26. .demo3>.item:last-of-type{
  27.     flex-shrink: 7;
  28. }
  29. .demo4>.item:first-of-type{
  30.     flex-shrink: 1.3;
  31. }
  32. .demo4>.item:nth-of-type(2){
  33.     flex-shrink: 2.5;
  34. }
  35. .demo4>.item:last-of-type{
  36.     flex-shrink: 3.7;
  37. }
  38. .demo5>.item:first-of-type{
  39.     width: 200px;
  40.     flex-shrink: 2.2;
  41. }         /*200-200*2.2*0.12067=146.9045*/
  42. .demo5>.item:nth-of-type(2){
  43.     width: 280px;
  44.     flex-shrink: 1.7;
  45. }         /*280-280*1.7*0.12067=222.561*/
  46. .demo5>.item:last-of-type{
  47.     width: 300px;
  48.     flex-shrink: 3.3;
  49. }       /*300-300*3.3*0.12067=180.5367*/
  50. /*等待缩减的空间/每个弹性元素的宽度与缩减因子乘积的总和*/
  51. /*230/((200*2.2)+(280*1.7)+(300*3.3))=0.12067*/



demo3.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置弹性元素的基准尺寸</title>
  6.     <link rel="stylesheet" href="css/style3.css">
  7. </head>
  8. <body>
  9. <h1>flex-basis:设置弹性元素的基准尺寸</h1>
  10. <h3>1、在未设置弹性元素宽度时，以内容宽度显示</h3>
  11. <div class="container flex demo1">
  12.     <span class="item">item1</span>
  13.     <span class="item">item2</span>
  14.     <span class="item">item3</span>
  15. </div>
  16. <h3>2、存在自定义元素宽度时，则以该宽度显示</h3>
  17. <div class="container flex demo2">
  18.     <span class="item">item1</span>
  19.     <span class="item">item2</span>
  20.     <span class="item">item3</span>
  21. </div>
  22. <h3>3、自动状态下，由浏览器根据预设值自行判定</h3>
  23. <div class="container flex demo3">
  24.     <span class="item">item1</span>
  25.     <span class="item">item2</span>
  26.     <span class="item">item3</span>
  27. </div>
  28. <h3>4、当元素存在自定义宽度与基准宽度时，以基准宽度为准</h3>
  29. <div class="container flex demo4">
  30.     <span class="item">item1</span>
  31.     <span class="item">item2</span>
  32.     <span class="item">item3</span>
  33. </div>
  34. <h3>5、元素基准宽度支持百分比设置</h3>
  35. <div class="container flex demo5">
  36.     <span class="item">item1</span>
  37.     <span class="item">item2</span>
  38.     <span class="item">item3</span>
  39. </div>
  41. </body>
  42. </html>

style3.css

  1. @import "public.css";
  2. .container{
  3.     width:550px;
  4. }
  5. .demo1>.item{
  6.     flex-basis: content;
  7. }
  8. .demo2>.item{
  9.     flex-basis:100px;
  10. }
  11. .demo3>.item{
  12.     flex-basis: auto;
  13. }
  14. .demo4>.item{
  15.     width:100px;
  16.     flex-basis: 150px;    /*基准宽度*/
  17. }
  18. .demo5>:first-child{
  19.     flex-basis: 20%;    /*550*0.2=110*/
  20. }
  21. .demo5>:nth-child(2){
  22.     flex-basis: 30%;
  23. }
  24. .demo5>:last-child{
  25.     flex-basis: 50%;
  26. }


demo4.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>简化弹性元素的基本设置</title>
  6.     <link rel="stylesheet" href="css/style4.css">
  7. </head>
  8. <body>
  9. <h1>flex:简化弹性元素的基本设置</h1>
  10. <h3>1:根据宽度计算，允许缩减适应容器</h3>
  11. <div class="container flex demo1">
  12.     <span class="item">item1</span>
  13.     <span class="item">item2</span>
  14.     <span class="item">item3</span>
  15. </div>
  16. <h3>2:根据宽度计算，元素完全弹性以适应容器</h3>
  17. <div class="container flex demo2">
  18.     <span class="item">item1</span>
  19.     <span class="item">item2</span>
  20.     <span class="item">item3</span>
  21. </div>
  22. <h3>3:元素完全失去弹性，以原始大小呈现</h3>
  23. <div class="container flex demo3">
  24.     <span class="item">item1</span>
  25.     <span class="item">item2</span>
  26.     <span class="item">item3</span>
  27. </div>
  28. <h3>4:一个数值表示增长因子</h3>
  29. <div class="container flex demo4">
  30.     <span class="item">item1</span>
  31.     <span class="item">item2</span>
  32.     <span class="item">item3</span>
  33. </div>
  34. <h3>5:第三个有具体数值时，以它为计算标准</h3>
  35. <div class="container flex demo5">
  36.     <span class="item">item1</span>
  37.     <span class="item">item2</span>
  38.     <span class="item">item3</span>
  39. </div>
  40. <h3>6:第三个有具体数值时，以它为计算标准</h3>
  41. <div class="container flex demo6">
  42.     <span class="item">item1</span>
  43.     <span class="item">item2</span>
  44.     <span class="item">item3</span>
  45. </div>
  47. </body>
  48. </html>

style4.css

  1. @import"public.css";
  2. .container{
  3.     width: 550px;
  4. }
  5. .demo1>.item{
  6.     width: 100px;
  7.     height:60px;
  8.     /*flex: 0 1 auto;*/
  9.     flex:initial;
  10. }
  11. .demo2>.item{
  12.     width:100px;
  13.     height:60px;
  14.     /*flex:1 1 auto;*/
  15.     flex:auto;
  16. }
  17. .demo3>.item{
  18.     width:100px;
  19.     height:60px;
  20.     /*flex:0 0 auto;*/
  21.     flex:none;
  22. }
  23. .demo4>.item{
  24.     width:100px;
  25.     height:60px;
  26.     flex:1;    /*只有一个增长因子，均分剩余空间*/
  27. }
  28. .demo5>.item{
  29.     width;100px;
  30.     height:60px;
  31.     flex:1 1 200px;
  32. }
  33. .demo6>.item{
  34.     width:100px;
  35.     height:60px;
  36. }
  37. .dmeo6>.item:first-of-type{
  38.     flex: 0 1 10%;
  39. }    /*增长因子，缩减因子，基准尺寸*/

2、将flex属性的用法，手抄，建议二遍以上

flex属性的用法：
flex-grow ：定义项目的放大比例,默认为0表示不放大, 即就算存在剩余空间也不放大
flex-shrink ：定义了项目的缩小比例,默认为1,即如何空间不足,则自动缩小项目来填充
flex-basis ：定义了项目占据的主轴空间,默认值为auto, 即项目原始大小
flex ：是flex-grow,flex-shrink,flex-basis简写,默认值: 0 1 auto, 后二个属性可选

3、自学align-self,order的用法

align-self ：个性化定定制某单个项目的对齐方式,可覆盖容器align-items属性,默认auto，表示继承父元素的align-items,如果没有父元素,则等价于stretch

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }

order ：定义项目排列顺序,索引越小越靠前,默认为0

  1. .item {
  2.   order: integer;
  3. }

4、试着将之前的一些案例用flex布局改定，例如圣杯布局

demo5.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex实现圣杯布局</title>
  6.     <link rel="stylesheet" href="css/style5.css">
  7. </head>
  8. <body>
  9. <header>头部</header>
  10. <main>
  11.     <article>主体</article>
  12.     <aside>左边框</aside>
  13.     <aside>右边框</aside>
  14. </main>
  15. <footer>底部</footer>
  17. </body>
  18. </html>

style5.css

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5. body{
  6.     height: 100vh;
  7.     display: flex;
  8.     flex-flow: column nowrap;
  9. }
  10. header,footer{
  11.     box-sizing: border-box;
  12.     background-color: lightgray;
  13.     height: 50px;
  14. }
  15. main{
  16.     box-sizing: border-box;
  17.     flex: 1;
  18.     display: flex;
  19.     background-color: mediumaquamarine;
  20. }
  21. main>aside{
  22.     box-sizing: border-box;
  23.     width: 200px;
  24. }
  25. main>aside:first-of-type{
  26.     background-color:lightpink;
  27.     order: -1;     /*调整弹性元素在主轴上的顺序，默认为0，允许负值或其他整数，这里让左边栏到最左边*/
  28. }
  29. main>aside:last-of-type{
  30.     background-color: lightpink;
  31. }
  32. main>article{
  33.     box-sizing: content-box;
  34.     flex: 1;
  35. }
上一条：12月20日_jQuery选择器（基本筛选器、属性选择器和表单对象属性）下一条：flex布局容器基本属性--- PHP培训十期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多