微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 0324作业-flex布局
博主信息
博文 34
粉丝 0
评论 0
访问量 24948
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
0324作业-flex布局
千山暮雪
原创
748人浏览过

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 项目在主轴上排列顺序 不写 显示顺序:默认按书写的源码顺序排列
【数字】 序号越小越靠前,越大越靠后，可以为负值
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录