flex布局

基础术语

  1. flex容器：具有css属性display:flex的元素
  2. flex项目：flex容器内的直接子元素
  3. 主轴：flex项目排列的轴线，有水平和垂直两种，默认为水平
  4. 交叉轴：与主轴垂直的轴线，因主轴默认为水平，交叉轴就对应为垂直了

flex容器的四大基本属性

基本属性属性说明属性值值说明
flex-flow主轴方向与换行方式row nowrap默认,主轴水平,不换行
row wrap主轴水平,换行
column nowrap主轴垂直,不换行
row nowrap主轴垂直,换行
justify-content项目在主轴上的对齐方式flex-start默认,起始线
flex-end终止线
center居中
space-between两端对齐
space-around分散对齐
space-evenly平均对齐
align-items项目在交叉轴上的对齐方式stretch默认，拉伸
flex-start起始线
flex-end终止线
center居中
align-content项目在多行容器交叉轴上的对齐方式stretch默认，拉伸
flex-start起始线
flex-end终止线
center居中

示例

flex-flow:row nowrap;" class="reference-link">主轴水平,不换行：flex-flow:row nowrap;

flex-flow:row nowrap;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             flex-flow: row nowrap;
  13.         }
  15.         main div {
  16.             background-color: lightblue;
  17.             order:
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <main>
  24.         <div>item1</div>
  25.         <div>item2</div>
  26.         <div>item3</div>
  27.         <div>item4</div>
  28.     </main>
  29. </body>
  31. </html>
flex-flow:row wrap;" class="reference-link">主轴水平，换行：flex-flow:row wrap;

需要设置项目宽度，当主轴剩余空间不足时换行
flex-flow:row wrap;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             flex-flow: row wrap;
  13.         }
  15.         main div {
  16.             background-color: lightblue;
  17.             width: 10rem;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <main>
  24.         <div>item1</div>
  25.         <div>item2</div>
  26.         <div>item3</div>
  27.         <div>item4</div>
  28.         <div>item5</div>
  29.         <div>item6</div>
  30.         <div>item7</div>
  31.         <div>item8</div>
  32.     </main>
  33. </body>
  35. </html>
flex-flow:column nowrap;" class="reference-link">主轴垂直，不换行：flex-flow:column nowrap;

flex-flow:column nowrap;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             flex-flow: column nowrap;
  13.         }
  15.         main div {
  16.             background-color: lightblue;
  17.             width: 10rem;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <main>
  24.         <div>item1</div>
  25.         <div>item2</div>
  26.         <div>item3</div>
  27.         <div>item4</div>
  28.         <div>item5</div>
  29.         <div>item6</div>
  30.         <div>item7</div>
  31.         <div>item8</div>
  32.     </main>
  33. </body>
  35. </html>
flex-flow:column wrap;" class="reference-link">主轴垂直，换行：flex-flow:column wrap;

需要设置容器和项目的高度，当所有项目的总高度超过容器时换行
flex-flow:column wrap;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             flex-flow: column wrap;
  13.             height: 20rem;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 10rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.         <div>item7</div>
  33.         <div>item8</div>
  34.     </main>
  35. </body>
  37. </html>
justify-content:flex-start;" class="reference-link">项目主轴对齐，起始线：justify-content:flex-start;

justify-content:flex-start;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             justify-content: flex-start;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.         <div>item7</div>
  33.         <div>item8</div>
  34.     </main>
  35. </body>
  37. </html>
justify-content:flex-end;" class="reference-link">项目主轴对齐，终止线：justify-content:flex-end;

justify-content:flex-end;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             justify-content: flex-end;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.         <div>item7</div>
  33.         <div>item8</div>
  34.     </main>
  35. </body>
  37. </html>
justify-content:center;" class="reference-link">项目主轴对齐，居中：justify-content:center;

justify-content:center;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             justify-content: center;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.         <div>item7</div>
  33.         <div>item8</div>
  34.     </main>
  35. </body>
  37. </html>
justify-content:space-between;" class="reference-link">项目主轴对齐，两端对齐：justify-content:space-between;

justify-content:space-between;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             justify-content: space-between;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
justify-content:space-around;" class="reference-link">项目主轴对齐，分散对齐：justify-content:space-around;

每个项目的两端宽度相同
justify-content:space-around;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             justify-content: space-around;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
justify-content:space-evenly;" class="reference-link">项目主轴对齐，平均对齐：justify-content:space-evenly;

justify-content:space-evenly;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             justify-content: space-evenly;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             height: 5rem;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
align-items:stretch;" class="reference-link">项目交叉轴对齐，拉伸：align-items:stretch;

项目未设置height时拉伸至与容器同高，如果设置了height无效果
align-items:stretch;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             align-items: stretch;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             /* height: 5rem; */
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
align-items:flex-start;" class="reference-link">项目交叉轴对齐，起始线：align-items:flex-start;

align-items:flex-start;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             align-items: flex-start;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             /* height: 5rem; */
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
align-items:flex-end;" class="reference-link">项目交叉轴对齐，终止线：align-items:flex-end;

需要容器设置了height才能看到效果

align-items:flex-end;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             align-items: flex-end;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             /* height: 5rem; */
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
align-items:center;" class="reference-link">项目交叉轴对齐，终止线：align-items:center;

需要容器设置了height才能看到效果
align-items:center;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             align-items: center;
  14.         }
  16.         main div {
  17.             background-color: lightblue;
  18.             width: 5rem;
  19.             /* height: 5rem; */
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <main>
  26.         <div>item1</div>
  27.         <div>item2</div>
  28.         <div>item3</div>
  29.         <div>item4</div>
  30.         <div>item5</div>
  31.         <div>item6</div>
  32.     </main>
  33. </body>
  35. </html>
align-content:stretch;" class="reference-link">项目多交叉轴对齐，拉伸：align-content:stretch;

需要flex-flow:开启wrap允许换行，主轴剩余空间不足产生多交叉轴
align-content:stretch;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             width: 40rem;
  14.             flex-flow: row wrap;
  15.             align-content: stretch;
  16.         }
  18.         main div {
  19.             background-color: lightblue;
  20.             width: 5rem;
  21.             /* height: 5rem; */
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <main>
  28.         <div>item1</div>
  29.         <div>item2</div>
  30.         <div>item3</div>
  31.         <div>item4</div>
  32.         <div>item5</div>
  33.         <div>item6</div>
  34.         <div>item7</div>
  35.         <div>item8</div>
  36.         <div>item9</div>
  37.         <div>item10</div>
  38.         <div>item11</div>
  39.         <div>item12</div>
  40.     </main>
  41. </body>
  43. </html>
align-content:flex-start;" class="reference-link">项目多交叉轴对齐，起始线：align-content:flex-start;

需要flex-flow:开启wrap允许换行，主轴剩余空间不足产生多交叉轴
align-textent:flex-start;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             width: 40rem;
  14.             flex-flow: row wrap;
  15.             align-content: flex-start;
  16.         }
  18.         main div {
  19.             background-color: lightblue;
  20.             width: 5rem;
  21.             /* height: 5rem; */
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <main>
  28.         <div>item1</div>
  29.         <div>item2</div>
  30.         <div>item3</div>
  31.         <div>item4</div>
  32.         <div>item5</div>
  33.         <div>item6</div>
  34.         <div>item7</div>
  35.         <div>item8</div>
  36.         <div>item9</div>
  37.         <div>item10</div>
  38.         <div>item11</div>
  39.         <div>item12</div>
  40.     </main>
  41. </body>
  43. </html>
align-content:flex-end;" class="reference-link">项目多交叉轴对齐，终止线：align-content:flex-end;

需要flex-flow:开启wrap允许换行，主轴剩余空间不足产生多交叉轴，终止线需要容器有height
align-content:flex-end;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             width: 40rem;
  14.             flex-flow: row wrap;
  15.             align-content: flex-end;
  16.         }
  18.         main div {
  19.             background-color: lightblue;
  20.             width: 5rem;
  21.             /* height: 5rem; */
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <main>
  28.         <div>item1</div>
  29.         <div>item2</div>
  30.         <div>item3</div>
  31.         <div>item4</div>
  32.         <div>item5</div>
  33.         <div>item6</div>
  34.         <div>item7</div>
  35.         <div>item8</div>
  36.         <div>item9</div>
  37.         <div>item10</div>
  38.         <div>item11</div>
  39.         <div>item12</div>
  40.     </main>
  41. </body>
  43. </html>
align-content:center;" class="reference-link">项目多交叉轴对齐，居中：align-content:center;

需要flex-flow:开启wrap允许换行，主轴剩余空间不足产生多交叉轴，居中需要容器有height
align-content:center;

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>flex布局</title>
  9.     <style>
  10.         main {
  11.             display: flex;
  12.             height: 20rem;
  13.             width: 40rem;
  14.             flex-flow: row wrap;
  15.             align-content: center;
  16.         }
  18.         main div {
  19.             background-color: lightblue;
  20.             width: 5rem;
  21.             /* height: 5rem; */
  22.         }
  23.     </style>
  24. </head>
  26. <body>
  27.     <main>
  28.         <div>item1</div>
  29.         <div>item2</div>
  30.         <div>item3</div>
  31.         <div>item4</div>
  32.         <div>item5</div>
  33.         <div>item6</div>
  34.         <div>item7</div>
  35.         <div>item8</div>
  36.         <div>item9</div>
  37.         <div>item10</div>
  38.         <div>item11</div>
  39.         <div>item12</div>
  40.     </main>
  41. </body>
  43. </html>

flex项目的三大基本属性

基本属性属性说明属性值值说明
flex项目的缩放比例与基准宽度0 1 auto / initial默认,禁止放大,允许收缩,宽度自动
1 1 auto / auto允许放大和收缩
0 0 auto / none禁止放大和收缩/PC布局
align-self单个项目在交叉轴上的对齐方式stretch默认,拉伸
flex-start起始线
flex-end终止线
center居中
order项目在主轴上排列顺序不写显示顺序:默认按书写的源码顺序排列
【数字】序号越小越靠前,越大越靠后，可以为负值

更多相关文章

  1. 圣怀布局,网格(容器,项目,单元,轨道,间距,排列,位置,对齐),隐式
  2. flex 基础
  3. grid对齐方式以及简单实战
  4. flex容器的认识
  5. flex元素常用属性
  6. flex容器与项目的常用属性
  7. 自定义类型的认识
  8. grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组
  9. 带你深入理解内存对齐最底层原理

随机推荐

  1. 为什么GraphQL是API的未来[每日前端夜话0
  2. 新浪微博评论爬取。
  3. 如何用WebAssembly为Web应用提速20倍
  4. MySQL事务处理及字符集和校对顺序
  5. java爬虫-初识
  6. 回到基础：优化 JavaScript 的循环[每日前
  7. 网易云音乐评论爬取。
  8. Javascript的对象拷贝[每日前端夜话0x53]
  9. 使用ESLint + Prettier简化代码 Review
  10. Edge 拥抱 Chromium 对前端工程师意味着