search

博客列表 >CSS弹性布局2-flex属性

CSS弹性布局2-flex属性

brait
brait原创
2019年11月06日 23:52:01707浏览

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. }

运行效果


上一条：弹性布局之小案例 - 第九期线上班下一条：弹性布局之弹性元素--PHP培训9期线上班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多