一、flex-direction（主轴的方向）

  1. 主轴和侧轴是变化的，当flex-direction设置主轴后，剩下的就是侧轴，子元素跟着主轴来排列 | 属性值 | 说明 | 效果 | | —- | —- | —- | | row | 从左到右（默认） | image.png | | row-reverse | 从右到左 | image.png | | column | 从上到下 | image.png | | column-reverse | 从下到上 | 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: 300px;
  10.             height: 100px;
  11.             background-color: skyblue;
  12.             /*从左到右排列*/
  13.             /*flex-direction: row;*/
  14.             /*从右到左排列*/
  15.             /*flex-direction: row-reverse;*/
  16.             /*从上到下排列*/
  17.             /*flex-direction: column;*/
  18.             /*从下到上排列*/
  19.             flex-direction: column-reverse;
  20.         }
  21.         div span{
  22.             width: 50px;
  23.             height: 50px;
  24.             background-color: pink;
  25.             margin-right: 10px;
  26.             border: 3px black solid;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31. <div>
  32.     <span>1</span>
  33.     <span>2</span>
  34.     <span>3</span>
  35. </div>
  36. </body>
  37. </html>

二、justify-content（主轴上的子元素排列方式）

  1. 设置在主轴上的对齐方式 | 属性 | 说明 | 效果 | | —- | —- | —- | | flex-start | 从头开始，如果主轴x轴，则从左到右(默认值) | image.png | | flex-end | 从尾部开始排列 | image.png | | center | 在主轴居中对齐 | image.png | | space-around | 平分剩余空间 | image.png | | space-between | 两边贴边，平分剩余空间 | 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: 300px;
  10.             height: 100px;
  11.             background-color: skyblue;
  12.             /*主轴从头开始排列*/
  13.             /*justify-content: flex-start;*/
  14.             /*主轴从尾部开始排列*/
  15.             /*justify-content: flex-end;*/
  16.             /*主轴居中对齐*/
  17.             /*justify-content: center;*/
  18.             /*主轴子元素平分剩余空间*/
  19.             /*justify-content: space-around;*/
  20.             /*主轴子元素两边贴边，然后平分剩余空间*/
  21.             justify-content: space-between;
  22.         }
  23.         div span{
  24.             width: 50px;
  25.             height: 50px;
  26.             background-color: pink;
  27.             border: 3px black solid;
  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>

三、flex-wrap（子元素是否换行）

  1. 默认情况下，所有子盒子都排列在一条线上，默认不换行 | 属性 | 说明 | 效果 | | —- | —- | —- | | nowarp | 不换行（默认） | image.png | | warp | 换行 | 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.             /*子盒子超出时不换行*/
  13.             flex-wrap:nowrap;
  14.             /*子盒子超出时换行*/
  15.             /*flex-wrap:wrap;*/
  16.         }
  17.         div span{
  18.             width: 50px;
  19.             height: 50px;
  20.             background-color: pink;
  21.             border: 3px black solid;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26. <div>
  27.     <span>1</span>
  28.     <span>2</span>
  29.     <span>3</span>
  30.     <span>4</span>
  31.     <span>5</span>
  32.     <span>6</span>
  33. </div>
  34. </body>
  35. </html>

四、align-items（侧轴上的子元素排列方式-单行）

  1. 控制子盒子在侧轴上的排列方式，子盒子为单行时使用 | 属性值 | 说明 | 效果 | | —- | —- | —- | | flex-start | 从上到下(默认) | image.png | | flex-end | 从下到上 | image.png | | center | 侧轴居中 | image.png | | 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.             /*侧轴从上到下排列*/
  13.             /*align-items: flex-start;*/
  14.             /*侧轴从下到上排列*/
  15.             /*align-items: flex-end;*/
  16.             /*侧轴居中排列*/
  17.             /*align-items: center;*/
  18.             /*侧轴拉伸*/
  19.             align-items: stretch;
  20.         }
  21.         div span{
  22.             width: 50px;
  23.             /*height: 50px;*/
  24.             background-color: pink;
  25.             border: 3px black solid;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <div>
  31.     <span>1</span>
  32.     <span>2</span>
  33.     <span>3</span>
  34. </div>
  35. </body>
  36. </html>

五、align-content（侧轴上的子元素排列方式-多行）

  1. 控制子盒子在侧轴上的排列方式，子盒子为多行时使用,记得设置flex-wrap: wrap（换行排列） | 属性值 | 说明 | 效果 | | —- | —- | —- | | flex-start | 从上到下（默认） | image.png | | flex-end | 从下到上 | image.png | | center | 居中 | image.png | | space-between | 两边贴边，平分剩余空间 | image.png | | 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.             /*换行排列*/
  13.             flex-wrap: wrap;
  14.             /*侧轴从上到下排列*/
  15.             /*align-content: flex-start;*/
  16.             /*侧轴从下到上排列*/
  17.             /*align-content: flex-end;*/
  18.             /*侧轴居中排列*/
  19.             /*align-content: center;*/
  20.             /*侧轴拉伸*/
  21.             /*align-content: stretch;*/
  22.             /*侧轴两边贴边*/
  23.             align-content: space-between;
  24.         }
  25.         div span{
  26.             width: 50px;
  27.             height: 50px;
  28.             background-color: pink;
  29.             border: 3px black solid;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34. <div>
  35.     <span>1</span>
  36.     <span>2</span>
  37.     <span>3</span>
  38.     <span>4</span>
  39.     <span>5</span>
  40.     <span>6</span>
  41. </div>
  42. </body>
  43. </html>

六、flex-flow（复合属性，相当于同时设置flex-direction和flex-wrap）

  1. 设置以列主轴方向，并换行

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.             /*已列方向为主轴*/
  13.             flex-direction: column;
  14.             /*超出后换行*/
  15.             flex-wrap:wrap;
  16.             /*以上两个属性合写*/
  17.             flex-flow:column wrap;
  18.         }
  20.         div span {
  21.             width: 50px;
  22.             height: 50px;
  23.             background-color: pink;
  24.             border: 3px black solid;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <div>
  30.     <span>1</span>
  31.     <span>2</span>
  32.     <span>3</span>
  33.     <span>4</span>
  34.     <span>5</span>
  35.     <span>6</span>
  36. </div>
  37. </body>
  38. </html>