一、flex（子项占剩余空间份数）

三个子盒子平均分配宽度 span1(flex:1)
span2(flex:1)
span3(flex:1)		 image.png
1号和3号盒子占一份，2号盒子占两份 span1(flex:1)
span2(flex:2)
span3(flex:1)		 image.png
1号和3号盒子宽20px，2号盒子占剩余空间 span1(width:20px)
span2(flex:1)
span3(width:20px)		 image.png 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex布局</title>
  6.     <style>
  7.         div {
  8.             display: flex;
  9.             width: 250px;
  10.             height: 150px;
  11.             background-color: skyblue;
  12.         }
  14.         div span {
  15.             /*width: 50px;*/
  16.             height: 50px;
  17.             background-color: pink;
  18.             border: 3px black solid;
  19.         }
  21.         span:nth-child(1) {
  22.             width: 20px;
  23.         }
  25.         span:nth-child(2) {
  26.             flex: 1;
  27.         }
  29.         span:nth-child(3) {
  30.             width: 20px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35. <div>
  36.     <span>1</span>
  37.     <span>2</span>
  38.     <span>3</span>
  39. </div>
  40. </body>
  41. </html>

二、align-self（子项在侧轴的排列方式）

  1. 设置子盒子对齐方式，可覆盖align-items熟悉，默认继承父元素的align-items | 2号盒子底部排列 | span2(align-self: flex-end) | image.png | | —- | —- | —- | | 2号盒子单独居中 | span2(align-self: center) | image.png | | 2号盒子拉伸 | span2(align-self: stretch) | image.png |
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex布局</title>
  6.     <style>
  7.         div {
  8.             display: flex;
  9.             width: 250px;
  10.             height: 150px;
  11.             background-color: skyblue;
  12.         }
  14.         div span {
  15.             width: 50px;
  17.             background-color: pink;
  18.             border: 3px black solid;
  19.         }
  20.         span:nth-child(1),span:nth-child(3){
  21.             height: 50px;
  22.         }
  23.         span:nth-child(2) {
  24.             /*单独底部排列*/
  25.             /*align-self: flex-end;*/
  26.             /*单独居中排列*/
  27.             /*align-self: center;*/
  28.             /*单独居中拉伸*/
  29.             align-self: stretch;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <div>
  35.     <span>1</span>
  36.     <span>2</span>
  37.     <span>3</span>
  38. </div>
  39. </body>
  40. </html>

三、order（子项排列先后顺序）

  1. 设置排列顺序，数值越小，越靠前 | 排列顺序改为213 | span2(order:-1) | image.png | | —- | —- | —- | | 排列顺序改为321 | span1(order:-1)
    span2(order:-2)
    span3(order:-3) | image.png |
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex布局</title>
  6.     <style>
  7.         div {
  8.             display: flex;
  9.             width: 250px;
  10.             height: 150px;
  11.             background-color: skyblue;
  12.         }
  14.         div span {
  15.             width: 50px;
  16.             height: 50px;
  17.             background-color: pink;
  18.             border: 3px black solid;
  19.         }
  20.         span:nth-child(1) {
  21.             order: -1;
  22.         }
  23.         span:nth-child(2){
  24.             order: -2;
  25.         }
  26.         span:nth-child(3) {
  27.             order: -3;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <div>
  33.     <span>1</span>
  34.     <span>2</span>
  35.     <span>3</span>
  36. </div>
  37. </body>
  38. </html>