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

flex 容器与项目

1. display属性

序号 属性值 描述 备注
1 flex; 创建 flex 块级容器 内部子元素自动成为 flex 项目
2 inline-flex; 创建 flex 行内容器 内部子元素自动成为 flex 项目

2. flex 容器与项目特征

序号 容器/项目 默认行为
1 容器主轴 水平方向
2 项目排列 沿主轴起始线排列(当前起始线居左)
3 项目类型 自动转换”行内块级”元素,不管之前是什么类型
4 容器主轴空间不足时 项目自动收缩尺寸以适应空间变化,不会换行显示
5 容器主轴存在未分配空间时 项目保持自身大小不会放大并充满空间

3.flex布局代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.   </style>
  21.   <body>
  22.     <div class="flex-content">
  23.       <div class="flex-item">1</div>
  24.       <div class="flex-item">2</div>
  25.       <div class="flex-item">3</div>
  26.     </div>
  27.   </body>
  28. </html>

4.flex布局截图

5.容器属性

  • 定义在flex容器中的属性，容器属性定义了容器中所有的项目应有的行为及表现

    5.1.flex-direction

  • 定义项目在容器中排列的方向，有4种属性值：row | row-reverse | column | column-reverse
  • item在容器中默认是横向从左到右排列的。除此之外，我们还可以将它设置为横向从右到左(row-reverse)、纵向从上到下(column)、纵向从下到上(column-reverse)
    5.1.1 row（默认值） ,项目从左到右排列
    flex-direction:row
    5.1.2 row（默认值）代码实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     .flex-content {
  21.       flex-direction: row;
  22.     }
  23.   </style>
  24.   <body>
  25.     <div class="flex-content">
  26.       <div class="flex-item">1</div>
  27.       <div class="flex-item">2</div>
  28.       <div class="flex-item">3</div>
  29.     </div>
  30.   </body>
  31. </html>
5.1.3 row（默认值）实例截图

  • 可以看到和默认没有变化

5.2.row-reverse

5.2.1row-reverse项目反向排列（从右到左）

flex-direction:row-reverse

5.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     /* 默认 */
  21.     /* .flex-content {
  22.       flex-direction: row;
  23.     } */
  24.     /* 重右到左 */
  25.     .flex-content {
  26.       flex-direction: row-reverse;
  27.     }
  28.   </style>
  29.   <body>
  30.     <div class="flex-content">
  31.       <div class="flex-item">1</div>
  32.       <div class="flex-item">2</div>
  33.       <div class="flex-item">3</div>
  34.     </div>
  35.   </body>
  36. </html>

5.2.3实列截图

5.3.column

5.3.1.项目纵向排列，从上到下）

flex-direction:column

5.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     /* 默认 */
  21.     /* .flex-content {
  22.       flex-direction: row;
  23.     } */
  24.     /* 重右到左 */
  25.     /* .flex-content { 
  26.       flex-direction: row-reverse;
  27.     } */
  28.     /* 重上往下 */
  29.     .flex-content {
  30.       flex-direction: column;
  31.     }
  32.   </style>
  33.   <body>
  34.     <div class="flex-content">
  35.       <div class="flex-item">1</div>
  36.       <div class="flex-item">2</div>
  37.       <div class="flex-item">3</div>
  38.     </div>
  39.   </body>
  40. </html>

5.3.3实列截图

5.4.column-reverse

5.4.1.项目纵向排列，从上到下）

flex-direction:column-reverse

5.4.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     /* 默认 */
  21.     /* .flex-content {
  22.       flex-direction: row;
  23.     } */
  24.     /* 重右到左 */
  25.     /* .flex-content { 
  26.       flex-direction: row-reverse;
  27.     } */
  28.     /* 重上往下 */
  29.     /* .flex-content {
  30.       flex-direction: column;
  31.     } */
  32.     /* 重下往上 */
  33.     .flex-content {
  34.       flex-direction: column-reverse;
  35.     }
  36.   </style>
  37.   <body>
  38.     <div class="flex-content">
  39.       <div class="flex-item">1</div>
  40.       <div class="flex-item">2</div>
  41.       <div class="flex-item">3</div>
  42.     </div>
  43.   </body>
  44. </html>

5.4.3实列截图

6.flex-wrap

  • 定义了容器中的项目在容器宽度不足以容纳项目时是否换换行。

6.1.nowrap(默认值)，item在容器中不换行,但item所设置的width可能失效

6.1.1.项目不换行）

flex-wrap:nowrap

6.1.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 100px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.     }
  15.     .flex-item {
  16.       width: 130px;
  17.       height: 80px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.     /* 默认 */
  22.     /* .flex-content {
  23.       flex-direction: row;
  24.     } */
  25.     /* 重右到左 */
  26.     /* .flex-content { 
  27.       flex-direction: row-reverse;
  28.     } */
  29.     /* 重上往下 */
  30.     /* .flex-content {
  31.       flex-direction: column;
  32.     } */
  33.     /* 重下往上 */
  34.     /* .flex-content {
  35.       flex-direction: column-reverse;
  36.     } */
  37.     /* 项目不换行，我们总宽度为620px，现在五个项目是650px */
  38.     .flex-content {
  39.       flex-wrap: nowrap;
  40.     }
  41.   </style>
  42.   <body>
  43.     <div class="flex-content">
  44.       <div class="flex-item">1</div>
  45.       <div class="flex-item">2</div>
  46.       <div class="flex-item">3</div>
  47.       <div class="flex-item">4</div>
  48.       <div class="flex-item">5</div>
  49.     </div>
  50.   </body>
  51. </html>

6.1.3实列截图

  • 由此我们可以看到它是默认还在一行的

6.2.wrap,item宽度不改变，容纳不下新增item时，自动换行

6.2.1.项目自动换行换行）

flex-wrap:wrap

6.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 100px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.     }
  15.     .flex-item {
  16.       width: 130px;
  17.       height: 80px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.     /* 默认 */
  22.     /* .flex-content {
  23.       flex-direction: row;
  24.     } */
  25.     /* 重右到左 */
  26.     /* .flex-content { 
  27.       flex-direction: row-reverse;
  28.     } */
  29.     /* 重上往下 */
  30.     /* .flex-content {
  31.       flex-direction: column;
  32.     } */
  33.     /* 重下往上 */
  34.     /* .flex-content {
  35.       flex-direction: column-reverse;
  36.     } */
  37.     /* 项目不换行，我们总宽度为620px，现在五个项目是650px */
  38.     /* .flex-content {
  39.       flex-wrap: nowrap;
  40.     } */
  41.     /* 现在项目自动换行了 */
  42.     .flex-content {
  43.       flex-wrap: wrap;
  44.     }
  45.   </style>
  46.   <body>
  47.     <div class="flex-content">
  48.       <div class="flex-item">1</div>
  49.       <div class="flex-item">2</div>
  50.       <div class="flex-item">3</div>
  51.       <div class="flex-item">4</div>
  52.       <div class="flex-item">5</div>
  53.     </div>
  54.   </body>
  55. </html>

6.2.3实列截图

6.3.wrap-reverse,反向换行，正常情况下换行是空间不够时向下换行，而wrap-reverse是空间不够时向上换行

6.3.1.项目反向）

flex-wrap:wrap-reverse

6.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.     }
  15.     .flex-item {
  16.       width: 130px;
  17.       height: 80px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.     /* 默认 */
  22.     /* .flex-content {
  23.       flex-direction: row;
  24.     } */
  25.     /* 重右到左 */
  26.     /* .flex-content { 
  27.       flex-direction: row-reverse;
  28.     } */
  29.     /* 重上往下 */
  30.     /* .flex-content {
  31.       flex-direction: column;
  32.     } */
  33.     /* 重下往上 */
  34.     /* .flex-content {
  35.       flex-direction: column-reverse;
  36.     } */
  37.     /* 项目不换行，我们总宽度为620px，现在五个项目是650px */
  38.     /* .flex-content {
  39.       flex-wrap: nowrap;
  40.     } */
  41.     /* 现在项目自动换行了 */
  42.     /* .flex-content {
  43.       flex-wrap: wrap;
  44.     } */
  45.    /* 项目反向 */
  46.     .flex-content {
  47.       flex-wrap: wrap-reverse;
  48.     }
  49.   </style>
  50.   <body>
  51.     <div class="flex-content">
  52.       <div class="flex-item">1</div>
  53.       <div class="flex-item">2</div>
  54.       <div class="flex-item">3</div>
  55.       <div class="flex-item">4</div>
  56.       <div class="flex-item">5</div>
  57.     </div>
  58.   </body>
  59. </html>

6.3.3实列截图

7.flex-flow

  • 是flex-direction与flex-wrap的简写形式
    flex-flow:<flex-direction> <flex-wrap>

7.1代码实列

  1. .flex-content{
  2.     flex-flow:row wrap;
  3. }
  5. //相当于
  6. .flex-content{
  7.     flex-direction:row;
  8.     flex-wrap:wrap;
  9. }

8.1justify-content

  • 定义了项目的水平方向对齐方式，有5种属性值flex-start | flex-end | center | space-between | space-around

8.1.1flex-start 项目左对齐

justify-content: flex-start

8.1.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       justify-content: flex-start;
  16.     }
  17.     .flex-item {
  18.       width: 130px;
  19.       height: 80px;
  20.       background-color: cyan;
  21.       font-size: 1.5rem;
  22.     }
  23.   </style>
  24.   <body>
  25.     <div class="flex-content">
  26.       <div class="flex-item">1</div>
  27.       <div class="flex-item">2</div>
  28.       <div class="flex-item">3</div>
  29.     </div>
  30.   </body>
  31. </html>

8.1.3截图实列

8.2.1flex-end 项目右对齐

justify-content: flex-end

8.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       justify-content: flex-end;
  18.     }
  19.     .flex-item {
  20.       width: 130px;
  21.       height: 80px;
  22.       background-color: cyan;
  23.       font-size: 1.5rem;
  24.     }
  25.   </style>
  26.   <body>
  27.     <div class="flex-content">
  28.       <div class="flex-item">1</div>
  29.       <div class="flex-item">2</div>
  30.       <div class="flex-item">3</div>
  31.     </div>
  32.   </body>
  33. </html>

8.2.3截图实列

8.3.1center 项目居中

justify-content: center

8.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       justify-content: center;
  20.     }
  21.     .flex-item {
  22.       width: 130px;
  23.       height: 80px;
  24.       background-color: cyan;
  25.       font-size: 1.5rem;
  26.     }
  27.   </style>
  28.   <body>
  29.     <div class="flex-content">
  30.       <div class="flex-item">1</div>
  31.       <div class="flex-item">2</div>
  32.       <div class="flex-item">3</div>
  33.     </div>
  34.   </body>
  35. </html>

8.3.3截图实列

8.4.1space-between 项目两端对齐

justify-content: space-between

8.4.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       /* justify-content: center; */
  20.       /* 项目两端对齐 */
  21.       justify-content: space-between;
  22.     }
  23.     .flex-item {
  24.       width: 130px;
  25.       height: 80px;
  26.       background-color: cyan;
  27.       font-size: 1.5rem;
  28.     }
  29.   </style>
  30.   <body>
  31.     <div class="flex-content">
  32.       <div class="flex-item">1</div>
  33.       <div class="flex-item">2</div>
  34.       <div class="flex-item">3</div>
  35.     </div>
  36.   </body>
  37. </html>

8.4.3截图实列

8.5.1space-around 每个项目间隔相同

justify-content: space-around

8.5.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       /* justify-content: center; */
  20.       /* 项目两端对齐 */
  21.       /* justify-content: space-between; */
  22.       /* 项目间隔相同 */
  23.       justify-content: space-around;
  24.     }
  25.     .flex-item {
  26.       width: 130px;
  27.       height: 80px;
  28.       background-color: cyan;
  29.       font-size: 1.5rem;
  30.     }
  31.   </style>
  32.   <body>
  33.     <div class="flex-content">
  34.       <div class="flex-item">1</div>
  35.       <div class="flex-item">2</div>
  36.       <div class="flex-item">3</div>
  37.     </div>
  38.   </body>
  39. </html>

8.5.3截图实列

9.1align-items

  • 这个属性与justify-content恰好相反，align-items定义了项目的竖直方向对齐方式。其属性值有flex-start | flex-end | center | baseline | strectch

    9.1.1flex-start 项目顶端对齐

    align-items: flex-start

    9.1.2代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 620px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     /* 项目左对齐 */
    15.     /* justify-content: flex-start; */
    16.     /* 项目右对齐 */
    17.     /* justify-content: flex-end; */
    18.     /* 项目居中 */
    19.     justify-content: center;
    20.     /* 项目两端对齐 */
    21.     /* justify-content: space-between; */
    22.     /* 项目间隔相同 */
    23.     /* justify-content: space-around; */
    24.     align-items: flex-start;
    25.   }
    26.   .flex-item1 {
    27.     width: 130px;
    28.     height: 80px;
    29.     background-color: cyan;
    30.     font-size: 1.5rem;
    31.   }
    32.   .flex-item2 {
    33.     width: 130px;
    34.     height: 50px;
    35.     background-color: rgb(255, 0, 212);
    36.     font-size: 1.5rem;
    37.   }
    38.   .flex-item3 {
    39.     width: 130px;
    40.     height: 120px;
    41.     background-color: rgb(4, 0, 255);
    42.     font-size: 1.5rem;
    43.   }
    44. </style>
    45. <body>
    46.   <div class="flex-content">
    47.     <div class="flex-item1">1</div>
    48.     <div class="flex-item2">2</div>
    49.     <div class="flex-item3">3</div>
    50.   </div>
    51. </body>
    52. </html>

9.1.3截图实列

9.2.1flex-end 项目底端对齐

align-items: flex-end

9.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       justify-content: center;
  20.       /* 项目两端对齐 */
  21.       /* justify-content: space-between; */
  22.       /* 项目间隔相同 */
  23.       /* justify-content: space-around; */
  24.       /* 项目顶端对齐 */
  25.       /* align-items: flex-start; */
  26.       /* 项目底端对齐 */
  27.       align-items: flex-end;
  28.     }
  29.     .flex-item1 {
  30.       width: 130px;
  31.       height: 80px;
  32.       background-color: cyan;
  33.       font-size: 1.5rem;
  34.     }
  35.     .flex-item2 {
  36.       width: 130px;
  37.       height: 50px;
  38.       background-color: rgb(255, 0, 212);
  39.       font-size: 1.5rem;
  40.     }
  41.     .flex-item3 {
  42.       width: 130px;
  43.       height: 120px;
  44.       background-color: rgb(4, 0, 255);
  45.       font-size: 1.5rem;
  46.     }
  47.   </style>
  48.   <body>
  49.     <div class="flex-content">
  50.       <div class="flex-item1">1</div>
  51.       <div class="flex-item2">2</div>
  52.       <div class="flex-item3">3</div>
  53.     </div>
  54.   </body>
  55. </html>

9.2.3截图实列

9.3.1center 项目中间对齐

align-items: center

9.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       justify-content: center;
  20.       /* 项目两端对齐 */
  21.       /* justify-content: space-between; */
  22.       /* 项目间隔相同 */
  23.       /* justify-content: space-around; */
  24.       /* 项目顶端对齐 */
  25.       /* align-items: flex-start; */
  26.       /* 项目底端对齐 */
  27.       /* align-items: flex-end; */
  28.       /* 项目中间对齐 */
  29.       align-items: center;
  30.     }
  31.     .flex-item1 {
  32.       width: 130px;
  33.       height: 80px;
  34.       background-color: cyan;
  35.       font-size: 1.5rem;
  36.     }
  37.     .flex-item2 {
  38.       width: 130px;
  39.       height: 50px;
  40.       background-color: rgb(255, 0, 212);
  41.       font-size: 1.5rem;
  42.     }
  43.     .flex-item3 {
  44.       width: 130px;
  45.       height: 120px;
  46.       background-color: rgb(4, 0, 255);
  47.       font-size: 1.5rem;
  48.     }
  49.   </style>
  50.   <body>
  51.     <div class="flex-content">
  52.       <div class="flex-item1">1</div>
  53.       <div class="flex-item2">2</div>
  54.       <div class="flex-item3">3</div>
  55.     </div>
  56.   </body>
  57. </html>

9.3.3截图实列

10.order 定义了项目的排列顺列，order的值越小，项目的排列位置越靠前。默认值为0

10.1代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       justify-content: center;
  15.     }
  16.     .flex-item1 {
  17.       width: 130px;
  18.       height: 80px;
  19.       background-color: cyan;
  20.       font-size: 1.5rem;
  21.     }
  22.     .flex-item2 {
  23.       width: 130px;
  24.       height: 50px;
  25.       background-color: rgb(255, 0, 212);
  26.       font-size: 1.5rem;
  27.     }
  28.     .flex-item3 {
  29.       width: 130px;
  30.       height: 120px;
  31.       background-color: rgb(4, 0, 255);
  32.       font-size: 1.5rem;
  33.     }
  34.     .flex-item1 {
  35.       order: 3;
  36.     }
  38.     .flex-item2 {
  39.       order: 1;
  40.     }
  42.     .flex-item3 {
  43.       order: 2;
  44.     }
  45.   </style>
  46.   <body>
  47.     <div class="flex-content">
  48.       <div class="flex-item1">1</div>
  49.       <div class="flex-item2">2</div>
  50.       <div class="flex-item3">3</div>
  51.     </div>
  52.   </body>
  53. </html>

10.2截图实列

11.flex-grow 定义了项目的放大比例，默认值为0，表示不放大

  • 在这里依次给.flex-item的flex-grow的值设置为0、2、3。其中0表示.flex-item的默认宽度，并没有放大。2、3表示将剩余的空间分为2+3=5份，其中item2占2/5份，.flex-item3占3/5份。

    11.1代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 620px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     justify-content: center;
    15.   }
    16.   .flex-item1 {
    17.     width: 130px;
    18.     height: 80px;
    19.     background-color: cyan;
    20.     font-size: 1.5rem;
    21.   }
    22.   .flex-item2 {
    23.     width: 130px;
    24.     height: 50px;
    25.     background-color: rgb(255, 0, 212);
    26.     font-size: 1.5rem;
    27.   }
    28.   .flex-item3 {
    29.     width: 130px;
    30.     height: 120px;
    31.     background-color: rgb(4, 0, 255);
    32.     font-size: 1.5rem;
    33.   }
    34.   /* .flex-item1 {
    35.     order: 3;
    36.   }
    38.   .flex-item2 {
    39.     order: 1;
    40.   }
    42.   .flex-item3 {
    43.     order: 2;
    44.   } */
    45.   .flex-item1 {
    46.     flex-grow: 0;
    47.   }
    49.   .flex-item2 {
    50.     flex-grow: 2;
    51.   }
    53.   .flex-item3 {
    54.     flex-grow: 3;
    55.   }
    56. </style>
    57. <body>
    58.   <div class="flex-content">
    59.     <div class="flex-item1">1</div>
    60.     <div class="flex-item2">2</div>
    61.     <div class="flex-item3">3</div>
    62.   </div>
    63. </body>
    64. </html>

    11.2截图实列

12.flex-shrink 定义了项目的缩小比例。默认值为1，表示当空间不足时将项目缩小至能被空间容纳

  • flex-shrink的值必须大于或等于0。当值为负数时，此值无效，相当于默认值。当值为0时，表示项目不缩放。值为1时，项目缩放。在这里，flex-item1、2、3的宽都被设置为130px，然而总的宽为320px，显然是不够宽的，但是因为flex-item1的flex-shrink值为0，所以不会被缩放，flex-item2、flex-item3的flex-shrink值为1，flex容器容纳不下时缩小了，所以它又能装下了。

    12.1代码实列

    1. <!DOCTYPE html>
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8. </head>
    9. <style>
    10.   .flex-content {
    11.     width: 320px;
    12.     height: 180px;
    13.     display: flex;
    14.     background-color: cornflowerblue;
    15.     justify-content: center;
    16.   }
    17.   .flex-item1 {
    18.     width: 130px;
    19.     height: 80px;
    20.     background-color: cyan;
    21.     font-size: 1.5rem;
    22.   }
    23.   .flex-item2 {
    24.     width: 130px;
    25.     height: 50px;
    26.     background-color: rgb(255, 0, 212);
    27.     font-size: 1.5rem;
    28.   }
    29.   .flex-item3 {
    30.     width: 130px;
    31.     height: 120px;
    32.     background-color: rgb(4, 0, 255);
    33.     font-size: 1.5rem;
    34.   }
    35.   /* .flex-item1 {
    36.     order: 3;
    37.   }
    39.   .flex-item2 {
    40.     order: 1;
    41.   }
    43.   .flex-item3 {
    44.     order: 2;
    45.   } */
    46.   /* .flex-item1 {
    47.     flex-grow: 0;
    48.   }
    50.   .flex-item2 {
    51.     flex-grow: 2;
    52.   }
    54.   .flex-item3 {
    55.     flex-grow: 3;
    56.   } */
    57.   .flex-item1 {
    58.     flex-shrink: 0;
    59.   }
    61.   .flex-item2 {
    62.     flex-shrink: 1;
    63.   }
    65.   .flex-item3 {
    66.     flex-shrink: 1;
    67.   }
    68. </style>
    69. <body>
    70.   <div class="flex-content">
    71.     <div class="flex-item1">1</div>
    72.     <div class="flex-item2">2</div>
    73.     <div class="flex-item3">3</div>
    74.   </div>
    75. </body>
    76. </html>

    12.2截图实列

13.flex-basis 定义了flex items 在被放进一个flex容器之前的大小(flex-basis含义)。默认值为auto

  • 通过flex-basis的含义可以很直观的感觉到flex-basis的作用跟width似乎一样。但是两者是有区别的，尽管两者都可以设置flex-item3的宽，但在flex容器中flex-basis的优先级高于width，即两者同时存在时，width会被屏蔽，无论代码中两者的先后顺序如何。

    13.1代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 720px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     justify-content: center;
    15.   }
    16.   .flex-item1 {
    17.     width: 130px;
    18.     height: 80px;
    19.     background-color: cyan;
    20.     font-size: 1.5rem;
    21.   }
    22.   .flex-item2 {
    23.     width: 130px;
    24.     height: 80px;
    25.     background-color: darkkhaki;
    26.     font-size: 1.5rem;
    27.   }
    28.   .flex-item3 {
    29.     height: 80px;
    30.     background-color: darkorange;
    31.     font-size: 1.5rem;
    32.   }
    34.   .flex-item3 {
    35.     flex-basis: 200px;
    36.     width: 130px;
    37.   }
    38. </style>
    39. <body>
    40.   <div class="flex-content">
    41.     <div class="flex-item1">1</div>
    42.     <div class="flex-item2">2</div>
    43.     <div class="flex-item3">3</div>
    44.   </div>
    45. </body>
    46. </html>

    13.2截图实列

14flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。flex-shrink和flex-basis是可选属性。

15.align-self 定义了单个项目的竖直方向对齐方式，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

  • flex-item1、flex-item3未设置align-self，其默认值为auto，所以继承了父元素的flex-start保持顶端对齐。而flex-item2设置了align-self为flex-end，固flex-item2是底端对齐的。

    15.1代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 720px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     justify-content: center;
    15.   }
    16.   .flex-item1 {
    17.     width: 130px;
    18.     height: 80px;
    19.     background-color: cyan;
    20.     font-size: 1.5rem;
    21.   }
    22.   .flex-item2 {
    23.     width: 130px;
    24.     height: 80px;
    25.     background-color: darkkhaki;
    26.     font-size: 1.5rem;
    27.   }
    28.   .flex-item3 {
    29.     width: 130px;
    30.     height: 80px;
    31.     background-color: darkorange;
    32.     font-size: 1.5rem;
    33.   }
    35.   .flex-content {
    36.     align-items: flex-start;
    37.   }
    38.   .flex-item2 {
    39.     align-self: flex-end;
    40.   }
    41. </style>
    42. <body>
    43.   <div class="flex-content">
    44.     <div class="flex-item1">1</div>
    45.     <div class="flex-item2">2</div>
    46.     <div class="flex-item3">3</div>
    47.   </div>
    48. </body>
    49. </html>

    15.2截图实列

学习总结：

一、容器属性：

　　1.flex-direction（方向）

　　2.flex-wrap（换行）

　　3.flex-flow（方向、换行的简写）

　　4.justify-content（水平方向对齐）

　　5.align-items（竖直方向对齐）

　　6.align-content（多行对齐）

二、项目属性：

　　1.order（顺序）

　　2.flex-grow（放大）

　　3.flex-shrink（缩小）

　　4.flex-basis（宽）

　　5.flex（放大、缩小、宽的简写）

　　6.align-self （单个竖直方向对齐）

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：每个属性都值得去研究, 但刚接触应该将重点放在一些常用属性上
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系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+教程免费学
    微信扫码登录