Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex 属性 和属性值的应用
Blogger Information
Blog 19
fans 0
comment 1
visits 14105
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex 属性 和属性值的应用
心
Original
561 people have browsed it

flex的声明

  1. 声明弹性盒子 display:flex ;

  2. :not(‘选择器’) 从匹配的元素中去掉某一个元素

  3. calc(‘数值’ - ‘数值’);

flex 基本术语

  1. 容器： 具有‘display:flex’ 属性元素

  2. 项目： flex 容器的‘子元素’

  3. 主轴： 项目排列的轴线

  4. 交叉轴： 与主轴垂直的轴线

容器属性

序号 属性 描述
1 ‘flex-flow’ 主轴方向与换行方式
2 ‘justify-content’ 项目在主轴上的对齐方式
3 ‘align-items’ 项目在交叉轴上的对齐方式
4 ‘align-content’ 项目在对行容器中的对齐方式

项目属性

序号 属性 秒睡
1 “flex” 项目的缩放比例与基准高度
2 “align-self” 单个项目在交叉轴的对齐方式
3 “order” 项目在主轴上的排序

弹性容器与弹性项目

  1. 任何元素都可以通过添加display:flex属性，转为弹性盒子

  2. 转为flex元素后，它的内部“子元素”就支持flex布局了

  3. 使用了display: flex属性的元素称为：flex容器

  4. flex 容器中的‘子元素’ 称之为： 弹性项目

  5. 工作中会存在大量的flex容器嵌套布局

实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex 的属性和属性值的应用</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             width: 40em;
  17.             height: 30em;
  18.             border: 1px solid #000;
  19.             display: flex;
  20.         }
  22.         .container>.itme {
  24.             width: 5em;
  25.             height: 2em;
  26.             border: 1px solid #000;
  27.         }
  29.         .container>.itme:last-child {
  30.             display: flex;
  31.         }
  33.         .container>.itme:last-child div {
  34.             background-color: antiquewhite;
  35.             border: 1px solid #000;
  36.         }
  37.     </style>
  38. </head>
  40. <body>
  41.     <div class="container">
  42.         <div class="itme">1</div>
  43.         <div class="itme">2</div>
  44.         <div class="itme">3</div>
  45.         <div class="itme">
  46.             <div>1</div>
  47.             <div>2</div>
  48.             <div>3</div>
  49.         </div>
  50.     </div>
  51. </body>
  53. </html>

示列

flex 嵌套使用

轴的概念

  1. 默认主轴: 项目排列的方向
  2. 与主轴垂直的叫交叉轴，项目换行的方向
    轴的概念

弹性项目在主轴上的排列方式

  1. 单行容器

  2. 主轴方向加换行 应使用 flex-flow: row nowrap; 第一个参数是主轴方向，第二个是换不换行

序号 属性 值 描述
1 flex-direction row 默认排列方式
2 flex-wrap nowrap 默认是不换行
3 flex-flow row nowrap 第一个参数是主轴方向 第二个是不换行
4 flex-flow column nowrap 列方向排列且不换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex 的属性和属性值的应用</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             width: 40em;
  17.             height: 30em;
  18.             border: 1px solid #000;
  19.             display: flex;
  20.             margin: 2em;
  21.             padding: 1em;
  22.         }
  24.         .container>.itme {
  26.             width: 5em;
  28.             border: 1px solid #000;
  29.         }
  31.         .container>.itme:last-child {
  32.             display: flex;
  33.         }
  35.         .container>.itme:last-child div {
  36.             background-color: antiquewhite;
  37.             border: 1px solid #000;
  38.         }
  39.     </style>
  40. </head>
  42. <body>
  43.     <div class="container">
  44.         <div class="itme">1</div>
  45.         <div class="itme">2</div>
  46.         <div class="itme">3</div>
  47.         <div class="itme">4</div>
  48.         <div class="itme">5</div>
  49.         <div class="itme">6</div>
  50.         <div class="itme">7</div>
  51.         <div class="itme">8</div>
  52.     </div>
  53. </body>
  55. </html>

默认行排列 且不换行

单行容器 默认排列

多行容器： 一行显示不下 允许换行显示

序号 属性 值 描述
1 flex-flow row wrap 第一个参数是行方向 第二个是换行
2 flex-flow column wrap 列方向排列且换行 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex 的属性和属性值的应用</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* width: 50em; */
  17.             height: 15em;
  18.             border: 1px solid #000;
  19.             display: flex;
  20.             margin: 2em;
  21.             padding: 1em;
  22.             flex-flow: column wrap;
  24.         }
  26.         .container>.itme {
  28.             width: 5em;
  29.             height: 5em;
  30.             border: 1px solid #000;
  31.             /*列方向排列 且换行显示*/
  32.             flex-flow: column wrap;
  33.         }
  35.         .container>.itme:last-child {
  36.             display: flex;
  37.         }
  39.         .container>.itme:last-child div {
  40.             background-color: antiquewhite;
  41.             border: 1px solid #000;
  42.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <div class="container">
  48.         <div class="itme">1</div>
  49.         <div class="itme">2</div>
  50.         <div class="itme">3</div>
  51.         <div class="itme">4</div>
  52.         <div class="itme">5</div>
  53.         <div class="itme">6</div>
  54.         <div class="itme">7</div>
  55.         <div class="itme">8</div>
  56.     </div>
  57. </body>
  59. </html>

列方向排列 且换行显示

列方向显示 且换行

弹性项目在单行容器中的对齐方式

  1. 设置项目在单行容器上轴上对齐前提： 主轴上存在剩余空间
    剩余空间

空间分配二种方案：

  1. 将所有项目视为一个整体，在项目组二边进行分配

  2. 将项目视为一个个独立的个体，在项目之间进行分配

  3. 交叉轴上的对齐方式

序号 属性 值 描述
1 justify-content flex-start 1. 默认左边对齐
2 justify-content flex-end 1. 右边对齐
3 justify-content center 1. 居中对齐
4 justify-content space-between 2. 两端对齐 中间自分配
5 jutify-content space-around 每个项目的两边平均分配 分散对齐
6 justify-content space-evenly 平均对齐
7 align-items stretch 拉伸
8 align-items flex-start 顶部对齐
9 align-items flex-end 底部对齐
10 align-items center 居中对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex 的属性和属性值的应用</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* width: 50em; */
  17.             /*height: 15em;*/
  18.             border: 1px solid #000;
  19.             display: flex;
  20.             margin: 2em;
  21.             padding: 1em;
  23.         }
  25.         .container>.itme {
  27.             width: 5em;
  28.             height: 5em;
  29.             border: 1px solid #000;
  30.         }
  31.         /*将所有项目视为一个整体，在项目组二边进行分配*/
  32.         .container{
  33.             /*左边对齐*/
  34.             justify-content:flex-start;
  35.             /*右边对齐*/
  36.             justify-content:flex-end;
  37.             /*居中对齐*/
  38.             justify-content:center;
  39.         /* 将项目视为一个个独立的个体，在项目之间进行分配*/    
  40.             /*两端对齐 中间平均分配*/
  41.             justify-content:space-between;
  42.             /*分散对齐*/
  43.             justify-content:space-around;
  44.             /*平均对齐*/
  45.             justify-content:space-evenly;
  46.         }
  47.         /*交叉轴上的对齐方案*/
  48.         .container{
  49.             /*拉伸*/
  50.             align-items:stretchl;
  51.             /*顶部对齐*/
  52.             align-items:flex-start;
  53.             /*底部对齐*/
  54.             align-items:flex-end;
  55.             /*居中*/
  56.             align-items：center;
  57.         }
  58.     </style>
  59. </head>
  61. <body>
  62.     <div class="container">
  63.         <div class="itme">1</div>
  64.         <div class="itme">2</div>
  65.         <div class="itme">3</div>
  66.         <div class="itme">4</div>
  67.     </div>
  68. </body>
  70. </html>

  1. 单行容器中左对齐 justify-content: flex-start; 默认的
    单行容器中左对齐

  2. 单行容器中右对齐 justify-content: flex-end;
    当行容器中右对齐

  3. 当行容器中居中显示 justify-content:center;
    单行容器中的居中

  4. 独立个体在项目中分配 两端对齐 justify-contetn:space-between
    两端对齐

  5. 独立个体在项目中两边平均分配 分散对齐 justify-content:space-around;
    独立个体分散对齐

  6. 独立个体在项目中两边平均分配 平均对齐 justify-content:space-evenly;
    平均对齐

  7. 交叉上的对齐方式 向上对齐 align-items:flex-start;
    交叉轴上的 向上对齐

  8. 交叉上的对齐方式 向下对齐 align-items:flex-end;
    交叉轴上的底部对齐

  9. 交叉上的对齐方式 居中对齐 align-items:center;
    交叉轴上的居中对齐

弹性项目在多行容器的对齐方式

序号 属性 值 描述
1 align-content stretch 默认
2 align-content flex-start 向上
3 align-content flex-end 向下
4 align-content center 居中
5 align-content space-between 两端对齐
6 align-content space-around 分散对齐
7 align-content space-evenly 平均对齐 
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex 的属性和属性值的应用</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             height: 15em;
  17.             border: 1px solid #000;
  18.             display: flex;
  19.             margin: 2em;
  20.             padding: 1em;
  22.         }
  24.         .container>.itme {
  26.             width: 5em;
  27.             /* height: 5em; */
  28.             border: 1px solid #000;
  29.         }
  30.         .container{
  31.             flex-flow:row wrap;
  32.             /*默认方式*/
  33.             align-content:stretch;
  34.             /*向上的对齐方式*/
  35.             align-content:flex-start;
  36.             /*向下的对齐方式*/
  37.             align-content:flex-end;
  38.             /*居中*/
  39.             align-content:center;
  40.             /*两端对齐*/
  41.             align-content:space-between;
  42.             /*分散对齐*/
  43.             align-content:space-around;
  44.             /*平均分配*/
  45.             align-content:space-evenly;
  46.         }
  47.     </style>
  48. </head>
  50. <body>
  51.     <div class="container">
  52.         <div class="itme">1</div>
  53.         <div class="itme">2</div>
  54.         <div class="itme">3</div>
  55.         <div class="itme">4</div>
  56.         <div class="itme">5</div>
  57.         <div class="itme">6</div>
  58.         <div class="itme">7</div>
  59.         <div class="itme">8</div>
  60.         <div class="itme">9</div>
  61.         <div class="itme">0</div>
  62.     </div>
  63. </body>
  65. </html>

  1. 多行容器对齐方式 align-content:stretch;默认
    多行容器 默认

  2. 多行容器向上对齐 align-content:flex-start;
    多行容器向上对齐

  3. 多行容器向下对齐 align-content:flex-end;
    多行容器向下对齐

  4. 多行容器居中 显示 align-content:center;
    多行容器居中

  5. 多行容器两端对齐 align-content:space-between;
    多行容器两端对齐

  6. 多行容器分散对齐 align-content：space-around;
    多行容器分散对齐

  7. 多行容器平均分配 align-content：space-evenly;
    多行容器平均分配

项目上的属性

  1. flex:flex-grow flex-shrink flex-basis;flex:放大因子 收缩因子 项目在主轴上的基准宽度

  2. flex: 1; 如果只有一个数字，省掉后面二个参数，表示放大因子 等同于 flex：1 1 auto；

  3. align-self: 单个项目的对齐方式

  4. 设置项目在主轴上的显示顺序 order:1; 数字越大越靠后

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex 的属性和属性值的应用</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.             box-sizing: border-box;
  13.         }
  15.         .container {
  16.             /* width: 50em; */
  17.             height: 15em;
  18.             border: 1px solid #000;
  19.             display: flex;
  20.             margin: 2em;
  21.             padding: 1em;
  23.         }
  25.         .container>.itme {
  27.             width: 5em;
  28.             border: 1px solid #000;
  29.         }
  31.         .container .itme {
  32.             /* 默认值*/
  33.             flex: 0 1 auto;
  34.             flex:initial;
  35.             /*允许放大和收缩*/
  36.             flex: 1 1 auto;
  37.             /*简写*/
  38.             flex: auto;
  39.             /*禁止收缩和放大*/
  40.             flex:0 0 auto;
  41.             /*简写*/
  42.             flex:none;
  43.             /*flex:1 只有一个数字的是 放大因子*/
  44.         }
  45.     </style>
  46. </head>
  48. <body>
  49.     <div class="container">
  50.         <div class="itme">1</div>
  51.         <div class="itme">2</div>
  52.         <div class="itme">3</div>
  53.         <div class="itme">4</div>
  54.         <div class="itme">5</div>
  55.         <div class="itme">6</div>
  56.         <div class="itme">7</div>
  57.         <div class="itme">8</div>
  58.         <div class="itme">9</div>
  59.         <div class="itme">10</div>
  60.         <div class="itme">11</div>
  61.         <div class="itme">12</div>
  62.     </div>
  63. </body>
  65. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：markdown语法非常的不熟悉
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post