Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性布局之弹性元素（第七章1105作业）-PHP培训九期线上班
Blogger Information
Blog 8
fans 0
comment 0
visits 4923
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性布局之弹性元素（第七章1105作业）-PHP培训九期线上班
yany
Original
528 people have browsed it

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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：同学, 你的作业穿越了, 咱们还没有学到flex项目的属性.... 不过, 咱们 是鼓励自学精神的, 给你大大的赞, 但下回请按教学进度完成作业...
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post