Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > CSS弹性布局2-flex属性
Blogger Information
Blog 12
fans 0
comment 0
visits 8583
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
CSS弹性布局2-flex属性
brait
Original
713 people have browsed it

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

DEMO1:设置元素的增长因子

  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>flex-grow: 设置弹性元素增长因子</h1>
  11. <h3>(1): 所有弹性元素不增长,以原始宽度显示,增长因子为: 0(默认)</h3>
  12. <div class="container flex demo1">
  13.     <span class="item">item1</span>
  14.     <span class="item">item2</span>
  15.     <span class="item">item3</span>
  16. </div>
  18. <h3>(2): 将全部剩余空间分配给指定弹性元素,例如: 第三个</h3>
  19. <div class="container flex demo2">
  20.     <span class="item">item1</span>
  21.     <span class="item">item2</span>
  22.     <span class="item">item3</span>
  23. </div>
  25. <h3>(3): 全部剩余空间按增长因子在不同弹性元素间分配</h3>
  26. <div class="container flex demo3">
  27.     <span class="item">item1</span>
  28.     <span class="item">item2</span>
  29.     <span class="item">item3</span>
  30. </div>
  32. <h3>(4): 增长因子支持小数, 因为是按增长比例分配</h3>
  33. <div class="container flex demo4">
  34.     <span class="item">item1</span>
  35.     <span class="item">item2</span>
  36.     <span class="item">item3</span>
  37. </div>
  39. <h3>(5): 每个弹性元素宽度不同时, 同样适用以上分配规律</h3>
  40. <div class="container flex demo5">
  41.     <span class="item">item1</span>
  42.     <span class="item">item2</span>
  43.     <span class="item">item3</span>
  44. </div>
  45. </body>
  46. </html>

CSS部分:

  1. @import "public.css";
  3. .container {
  4.     width: 550px;
  5. }
  6. .item {
  8.     width: 100px;
  9. }
  12. .demo1 > .item {
  13.     flex-grow: 0;
  14. }
  17. .demo2 > .item:first-of-type {
  18.     flex-grow: 0;
  19. }
  20. .demo1 > .item:nth-of-type(2) {
  21.     flex-grow: 0;
  22. }
  23. .demo2 > .item:last-of-type {
  24.     flex-grow: 1;
  25. }
  28. .demo3 > .item:first-of-type {
  29.     flex-grow: 1;
  30. }
  31. .demo3 > .item:nth-of-type(2) {
  32.     flex-grow: 1;
  33. }
  34. .demo3 > .item:last-of-type {
  35.     flex-grow: 3;
  36. }
  38. .demo4 > .item:first-of-type {
  39.     flex-grow: 0.5;
  40. }
  41. .demo4 > .item:nth-of-type(2) {
  42.     flex-grow: 0.5;
  43. }
  44. .demo4 > .item:last-of-type {
  45.     flex-grow: 1.5;
  46. }
  49. .demo5 > .item:first-of-type {
  50.     width: 120px;
  51.     flex-grow: 2;
  52. }
  54. .demo5 > .item:nth-of-type(2) {
  55.     width: 150px;
  56.     flex-grow: 2;
  57. }
  58. .demo5 > .item:last-of-type {
  59.     width: 180px;
  60.     flex-grow: 6;
  61. }

运行效果：

DEMO2:设置弹性元素的缩减因子

  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>
  11. <h3>(1): 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</h3>
  12. <div class="container flex demo1">
  13.     <span class="item">item1</span>
  14.     <span class="item">item2</span>
  15.     <span class="item">item3</span>
  16. </div>
  18. <h3>(2): 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</h3>
  19. <div class="container flex demo2">
  20.     <span class="item">item1</span>
  21.     <span class="item">item2</span>
  22.     <span class="item">item3</span>
  23. </div>
  25. <h3>(3): 当三个弹性元素的缩减因为子不相等时</h3>
  26. <div class="container flex demo3">
  27.     <span class="item">item1</span>
  28.     <span class="item">item2</span>
  29.     <span class="item">item3</span>
  30. </div>
  32. <h3>(4): 缩减因子也可以是小数,只要大于就可以</h3>
  33. <div class="container flex demo4">
  34.     <span class="item">item1</span>
  35.     <span class="item">item2</span>
  36.     <span class="item">item3</span>
  37. </div>
  39. <h3>(5): 当每个弹性元素宽度不一样时, 完全是另一道风景线</h3>
  40. <div class="container flex demo5">
  41.     <span class="item">item1</span>
  42.     <span class="item">item2</span>
  43.     <span class="item">item3</span>
  44. </div>
  45. </body>
  46. </html>

CSS部分：

  1. @import "public.css";
  3. .container {
  4.     width: 550px;
  5. }
  6. .item {
  8.     width: 250px;
  9. }
  12. .demo1 > .item {
  13.     flex-shrink: 0;
  14. }
  16. .demo2 > .item {
  17.     flex-shrink: 1;
  18. }
  20. .demo3 > .item:first-of-type {
  21.     flex-shrink: 1;
  22. }
  23. .demo3 > .item:nth-of-type(2) {
  24.     flex-shrink: 2;
  25. }
  26. .demo3 > .item:last-of-type {
  27.     flex-shrink: 3;
  28. }
  31. .demo4 > .item:first-of-type {
  32.     flex-shrink: 0.2;
  33. }
  34. .demo4 > .item:nth-of-type(2) {
  35.     flex-shrink: 0.3;
  36. }
  37. .demo4 > .item:last-of-type {
  38.     flex-shrink: 0.5;
  39. }
  42. .demo5 > .item:first-of-type {
  43.     width: 220px;
  44.     flex-shrink: 2;
  45. }
  47. .demo5 > .item:nth-of-type(2) {
  48.     width: 250px;
  49.     flex-shrink: 2;
  50. }
  51. .demo5 > .item:last-of-type {
  52.     width: 280px;
  53.     flex-shrink: 6;
  54. }

运行效果:

DEMO3:设置弹性元素的基准尺寸

  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>
  11. <h3>(1): 在未设置弹性元素宽度时, 以内容宽度显示</h3>
  12. <div class="container flex demo1">
  13.     <span class="item">item1</span>
  14.     <span class="item">item2</span>
  15.     <span class="item">item3</span>
  16. </div>
  18. <h3>(2): 存在自定义元素宽度时,则以该宽度显示</h3>
  19. <div class="container flex demo2">
  20.     <span class="item">item1</span>
  21.     <span class="item">item2</span>
  22.     <span class="item">item3</span>
  23. </div>
  25. <h3>(3): 自动状态下, 由浏览器根据预设值自行判定</h3>
  26. <div class="container flex demo3">
  27.     <span class="item">item1</span>
  28.     <span class="item">item2</span>
  29.     <span class="item">item3</span>
  30. </div>
  32. <h3>(4): 当元素存在自定义宽度与基准宽度时, 以基准宽度为准 </h3>
  33. <div class="container flex demo4">
  34.     <span class="item">item1</span>
  35.     <span class="item">item2</span>
  36.     <span class="item">item3</span>
  37. </div>
  39. <h3>(5): 元素基准宽度支持百分比设置 </h3>
  40. <div class="container flex demo5">
  41.     <span class="item">item1</span>
  42.     <span class="item">item2</span>
  43.     <span class="item">item3</span>
  44. </div>
  45. </body>
  46. </html>

CSS部分：

  1. @import "public.css";
  3. .container {
  4.     width: 550px;
  5. }
  7. .demo1 > .item {
  8.     flex-basis: content;
  9. }
  11. .demo2 > .item {
  12.     width: 100px;
  13. }
  15. .demo3 > .item {
  16.     flex-basis: auto;
  17. }
  19. .demo4 > .item {
  20.     width: 100px;
  21.     flex-basis: 150px;
  22. }
  25. .demo5 > :first-child {
  26.     flex-basis: 20%;
  27. }
  29. .demo5 > :nth-child(2) {
  30.     flex-basis: 30%;
  31. }
  33. .demo5 > :last-child {
  34.     flex-basis: 50%;
  35. }

运行效果：

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

3. 自学:align-self, order的用法

1.align-self

  1. 语法:
  2. align-self: auto
  3. align-self: flex-start
  4. align-self: flex-end
  5. align-self: center
  6. align-self: baseline
  7. align-self: stretch
  8. 备注：写这个部分的时候搞混了，align-items 为弹性容器中所有项目设置缺省对齐属性，包括匿名弹性项目。align-self 可以为单独的弹性项目设置对齐来覆盖缺省值。实例做的是align-items 。

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置弹性元素的align-self</title>
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <body>
  9.     <p class="label start">flex-start:</p>
  10.     <div class="flex">
  11.         <div class="item">1</div>
  12.         <div class="item">2</div>
  13.         <div class="item">3</div>
  14.         <div class="item">4</div>
  15.     </div>
  17.     <p class="label center">center:</p>
  18.     <div class="flex center">
  19.         <div class="item">1</div>
  20.         <div class="item">2</div>
  21.         <div class="item">3</div>
  22.         <div class="item">4</div>
  23.     </div>
  25.     <p class="label end">flex-end:</p>
  26.     <div class="flex end">
  27.         <div class="item">1</div>
  28.         <div class="item">2</div>
  29.         <div class="item">3</div>
  30.         <div class="item">4</div>
  31.     </div>
  33.     <p class="label baseline">baseline:</p>
  34.     <div class="flex baseline">
  35.         <div class="item">1</div>
  36.         <div class="item">2</div>
  37.         <div class="item">3</div>
  38.         <div class="item">4</div>
  39.     </div>
  41.     <p class="label stretch">stretch:</p>
  42.     <div class="flex stretch">
  43.         <div class="item s">1</div>
  44.         <div class="item s">2</div>
  45.         <div class="item s">3</div>
  46.         <div class="item s">4</div>
  47.     </div>
  48. </body>
  49. </html>

CSS部分：

  2. .flex {
  3.     display: flex;
  4.     align-items: flex-start;
  5.     min-height: 100px;
  6. }
  7. .flex.center {
  8.     align-items: center;
  9. }
  10. .flex.end {
  11.     align-items: flex-end;
  12. }
  13. .flex.baseline {
  14.     align-items: baseline;
  15. }
  16. .flex.stretch {
  17.     align-items: stretch;
  18.     /*default value*/
  19. }
  20. .item {
  21.     width: 80px;
  22.     box-sizing: border-box;
  23. }
  24. .flex >.item:nth-child(1) {
  25.     height: 60px;
  26. }
  27. .flex >.item:nth-child(2) {
  28.     background: orange;
  29.     height: 80px;
  30.     font-size: 22px;
  31. }
  32. .flex >.item:nth-child(3) {
  33.     height: 50px;
  34. }
  35. .flex >.item:nth-child(4) {
  36.     background: green;
  37.     height: 70px;
  38.     font-size: 32px;
  39. }
  40. .flex >.item.s {
  41.     height: auto;
  42. }
  43. /* other styles just for format */
  45. .flex {
  46.     background: #333;
  47.     margin-bottom: 10px;
  48. }
  49. .flex.stretch {
  50.     margin-bottom: 60px;
  51. }
  52. .item {
  53.     padding: 5px;
  54.     background: #999;
  55.     text-align: center;
  56. }
  57. .label {
  58.     font-size: 18px;
  59. }

运行效果：


2.order （用来排序）

  1. 语法   order：数字；      数字越小，顺序越靠前

实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <body>
  9.     <p class="label start">排列顺序为模块中数字2314:</p>
  10.     <div class="flex">
  11.         <div class="item">1</div>
  12.         <div class="item">2</div>
  13.         <div class="item">3</div>
  14.         <div class="item">4</div>
  15.     </div>
  17. </body>
  18. </html>

CSS部分：

  2. .flex {
  3.     display: flex;
  4.     align-items: flex-start;
  5.     min-height: 100px;
  6. }
  9. .item {
  10.     width: 80px;
  11.     box-sizing: border-box;
  12. }
  13. .flex >.item:nth-child(1) {
  14.     height: 60px;
  15.     order: 2;
  16. }
  17. .flex >.item:nth-child(2) {
  18.     background: orange;
  19.     height: 80px;
  20.     font-size: 22px;
  21.     order: 0;
  22. }
  23. .flex >.item:nth-child(3) {
  24.     height: 50px;
  25.     order: 1;
  26. }
  27. .flex >.item:nth-child(4) {
  28.     background: green;
  29.     height: 70px;
  30.     font-size: 32px;
  31.     order: 3;
  32. }
  33. .flex >.item{
  34.     height: auto;
  35. }
  36. /* other styles just for format */
  38. .flex {
  39.     background: #333;
  40.     margin-bottom: 10px;
  41. }
  43. .item {
  44.     padding: 5px;
  45.     background: #999;
  46.     text-align: center;
  47. }
  48. .label {
  49.     font-size: 18px;
  50. }

运行效果：


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

实例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>用flex做圣杯布局</title>
  6.     <link rel="stylesheet" href="css/style1.css">
  7. </head>
  8. <h3>用flex做圣杯布局</h3>
  9. <body>
  10.     <div class="container">
  11.             <div class="head">head</div>
  12.             <div class="main">
  13.                 <div class="aside">left</div>
  14.                 <div class="article">article</div>
  15.                 <div class="aside">right</div>
  16.             </div>
  17.             <div class="footer">footer</div>
  18.     </div>
  20. </body>
  21. </html>

CSS部分：

  1. .container{
  2.     display: flex;
  3.     flex-direction: column;
  4.     height: 800px;
  6. }
  8. .head,.footer{
  9.     background-color: gray;
  10.     width: 80%;
  11.     flex-grow: 1;
  12. }
  14. .main{
  15.     display: flex;
  16.     flex-direction: row;
  17.     width: 80%;
  18.     flex-grow: 8;
  19. }
  21. .aside{
  22.     background-color: green;
  23.     width: 30px;
  24.     flex-grow: 2;
  25. }
  27. .article{
  28.     background-color:goldenrod ;
  29.     width: 80px;
  30.     flex-grow: 6;
  31. }

运行效果


Correction status：qualified

Teacher's comments：你的昵称为空为什么, 想推荐都不能是谁?起个好听的名字吧
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