search

博客列表 >0324作业-flex布局

0324作业-flex布局

千山暮雪
千山暮雪原创
2021年03月25日 15:50:24529浏览

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;

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;

需要设置项目宽度，当主轴剩余空间不足时换行
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;

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;

需要设置容器和项目的高度，当所有项目的总高度超过容器时换行
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;

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;

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;

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;

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;

每个项目的两端宽度相同
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;

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;

项目未设置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;

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;

需要容器设置了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;

需要容器设置了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;

需要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;

需要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;

需要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;

需要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 项目在主轴上排列顺序 不写 显示顺序:默认按书写的源码顺序排列
【数字】 序号越小越靠前,越大越靠后，可以为负值
上一条：php类的引用与mysql基础下一条：【CSS入门】前端布局神器Flex弹性盒模型详解及适用场景(建议收藏)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多