search

博客列表 >flex布局学习总结

flex布局学习总结

麦穗
麦穗原创
2020年04月10日 15:29:26717浏览

flex 布局学习

基本源码布局
(添加flex-direction:row,使项目沿主轴方向排列)

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       .container {
  9.         width: 300px;
  10.         height: 150px;
  11.         display: flex;
  12.         flex-direction: row;
  13.       }
  14.       .item {
  15.         width: 100px;
  16.         height: 50px;
  17.         font-size: 3rem;
  18.         background-color: turquoise;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="container">
  24.       <div class="item">1</div>
  25.       <div class="item">2</div>
  26.       <div class="item">3</div>
  27.       <div class="item">4</div>
  28.     </div>
  29.   </body>
  30. </html>

1.container属性（flex-direction: row;）效果显示

2.container属性（flex-direction: row-reverse;）效果显示

3.container属性（flex-direction:column;）效果显示

4.container属性（flex-direction: column-reverse;）效果显示

5.container属性（flex-direction: row; flex-wrap: nowrap;）效果显示

6.container属性（flex-direction: row; flex-wrap: wrap;）效果显示

7.container属性（ flex-direction: row;flex-wrap:wrap-reverse;）效果显示

8.container属性（flex-flow: row nowrap;）效果显示

9.container属性（flex-flow: row nowrap;justify-content: flex-start;）效果显示

10.container属性（flex-flow: row nowrap;justify-content: flex-end;）效果显示

11.container属性（flex-flow: row nowrap;justify-content:center;）效果显示

12.container属性（flex-flow: row nowrap;justify-content:space-between;）效果显示

13.container属性（flex-flow: row nowrap;justify-content: space-around;）效果显示

14.container属性（flex-flow: row nowrap;justify-content: space-evenly;）效果显示

15.container属性（flex-flow: row nowrap;align-items:flex-start;）效果显示

16.container属性（flex-flow: row nowrap;align-items:flex-end;）效果显示

17.container属性（flex-flow: row nowrap;align-items:center;）效果显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       .container {
  9.         width: 300px;
  10.         height: 150px;
  11.         display: flex;
  12.         flex-flow: row wrap;
  13.         align-content: stretch;
  14.       }
  15.       .item {
  16.         width: 50px;
  17.         height: 50px;
  18.         font-size: 3rem;
  19.         background-color: turquoise;
  20.         order: 0;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div class="container">
  26.       <div class="item">1</div>
  27.       <div class="item">2</div>
  28.       <div class="item">3</div>
  29.       <div class="item">4</div>
  30.       <div class="item">5</div>
  31.       <div class="item">6</div>
  32.       <div class="item">7</div>
  33.       <div class="item">8</div>
  34.     </div>
  35.   </body>
  36. </html>

18.container属性（flex-flow: row wrap; align-content: stretch;）效果显示

19.container属性（flex-flow: row wrap;align-content: flex-start;）效果显示

20.container属性（flex-flow: row wrap;align-content: flex-end;）效果显示

21.container属性（flex-flow: row wrap;align-content: flex-center;）效果显示

22.container属性（flex-flow: row wrap; align-content:space-between;）效果显示

23.container属性（flex-flow: row wrap; align-content:space-around;）效果显示

24.container属性（flex-flow: row wrap; align-content:space-evenly）效果显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       .container {
  9.         width: 300px;
  10.         height: 150px;
  11.         display: flex;
  12.         flex-flow: row nowrap;
  13.       }
  14.       .item {
  15.         width: 50px;
  16.         height: 50px;
  17.         font-size: 3rem;
  18.         background-color: turquoise;
  19.         order: 0;
  20.       }
  21.       .item:first-of-type {
  22.         background-color: wheat;
  23.       }
  24.       .item:nth-of-type(2) {
  25.         background-color: lightblue;
  26.       }
  27.       .item:nth-of-type(3) {
  28.         background-color: lightpink;
  29.       }
  30.       .item:last-of-type {
  31.         background-color: lightsteelblue;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">1</div>
  38.       <div class="item">2</div>
  39.       <div class="item">3</div>
  40.       <div class="item">4</div>
  41.     </div>
  42.   </body>
  43. </html>


25.item添加（order）属性效果显示

  1.     .item {
  2.         width: 50px;
  3.         height: 50px;
  4.         font-size: 3rem;
  5.         background-color: turquoise;
  6.         order: 0;
  7.       }
  8.       .item:first-of-type {
  9.         background-color: wheat;
  10.         order: 4;
  11.       }
  12.       .item:nth-of-type(2) {
  13.         background-color: lightblue;
  14.         order:3;
  15.       }
  16.       .item:nth-of-type(3) {
  17.         background-color: lightpink;
  18.         order: 2;
  19.       }
  20.       .item:last-of-type {
  21.         background-color: lightsteelblue;
  22.         order:1;
  23.       }


26.item属性（align-self: auto;）效果显示

27.item:first-of-type属性（align-self: flex-start;）效果显示

28.item:nth-of-type(2)属性（align-self: flex-end）效果显示

29.item:nth-of-type(3)属性（align-self: center;）效果显示

30.item:last-of-type属性（height: inherit;align-self: stretch;）效果显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.       .container {
  9.         width: 300px;
  10.         height: 150px;
  11.         display: flex;
  12.         flex-flow: row nowrap;
  13.       }
  14.       .item {
  15.         width: 50px;
  16.         height: 50px;
  17.         font-size: 3rem;
  18.         background-color: turquoise;
  19.       }
  20.       .item:first-of-type {
  21.         background-color: wheat;
  22.       }
  23.       .item:nth-of-type(2) {
  24.         background-color: lightblue;
  25.       }
  26.       .item:nth-of-type(3) {
  27.         background-color: lightpink;
  28.       }
  29.       .item:last-of-type {
  30.         background-color: lightsteelblue;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <div class="container">
  36.       <div class="item">1</div>
  37.       <div class="item">2</div>
  38.       <div class="item">3</div>
  39.       <div class="item">4</div>
  40.     </div>
  41.   </body>
  42. </html>


31.添加item属性（flex-grow）效果显示

  1.       .item {
  2.         width: 50px;
  3.         height: 50px;
  4.         font-size: 3rem;
  5.         background-color: turquoise;
  6.         flex-grow: 0;
  7.       }
  8.       .item:first-of-type {
  9.         background-color: wheat;
  10.         flex-grow: 1;
  11.       }
  12.       .item:nth-of-type(2) {
  13.         background-color: lightblue;
  14.         flex-grow: 2;
  15.       }
  16.       .item:nth-of-type(3) {
  17.         background-color: lightpink;
  18.         flex-grow: 3;
  19.       }
  20.       .item:last-of-type {
  21.         background-color: lightsteelblue;
  22.         flex-grow: 4;
  23.       }


32.添加item属性（flex-shrink）效果显示

  1.       .item {
  2.         width: 100px;
  3.         height: 50px;
  4.         font-size: 3rem;
  5.         background-color: turquoise;
  6.         flex-shrink: 0;
  7.       }
  8.       .item:first-of-type {
  9.         background-color: wheat;
  10.         flex-shrink: 1;
  11.       }
  12.       .item:nth-of-type(2) {
  13.         background-color: lightblue;
  14.         flex-shrink: 2;
  15.       }
  16.       .item:nth-of-type(3) {
  17.         background-color: lightpink;
  18.         flex-shrink: 3;
  19.       }
  20.       .item:last-of-type {
  21.         background-color: lightsteelblue;
  22.         flex-shrink: 4;
  23.       }


33.item属性（flex-basis: auto;）效果显示

34.item属性（flex-basis: 100px;）效果显示

35.item属性（flex-basis: 20%;）效果显示

36.item:nth-of-type(2)属性（flex: 1;）效果显示

37.item:nth-of-type(2)属性（flex: auto;）效果显示

38.item:nth-of-type(2)属性（flex: 150px;）效果显示

39.item:nth-of-type(2)属性（flex: 1 auto;）效果显示

40.item:nth-of-type(2)属性（flex: 0 auto;）效果显示

41.item:nth-of-type(2)属性（flex:1 0 auto;）效果显示

42.item:nth-of-type(2)属性（flex:0 1 auto;）效果显示

43.item:nth-of-type(2)属性（flex:0 1 auto;）效果显示

学习总结

1.flex感觉是比浮动和定位好多了，没有那么抽象，看效果图也好理解一点
2.flex-basis设置了数值，显示却不是输入的数值

上一条：flex 容器与项目下一条：FLEX 弹性布局学习笔记
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多