search

博客列表 >flex 容器常用的 6 个属性

flex 容器常用的 6 个属性

Wu.Ang
Wu.Ang原创
2022年08月08日 21:24:16559浏览

flex 容器常用的 6 个属性

flex 容器,就是一个块元素,只在一个方向上排列元素(默认水平排列)

  1. 主轴 : 元素排列
  2. 交叉轴 : 元素对齐
  3. 所有子元素自动转为行内级的块元素
  4. 沿主轴排列
  5. 剩余空间 : 未分配的空间,可以利用的空间
  6. 项目 : 容器中的子元素(只能是子元素)

属性

  1. 第一个属性 : flex-flow , 控制主轴方向与是否换行
  2. 第二个属性 : place-content , 剩余空间在项目中如何分配
  3. 第三个属性 : place-items , 项目在交叉轴对齐

将当前元素转为弹性盒子 display:flex;

  1. .container {
  2.   /* 转为弹性盒子 */
  3.   display: flex;
  4.   /* 支持宽高 */
  5. }

主轴方向 flex-direction:row(行方向)/column(列方向);

  1. .container {
  2.   /* 主轴方向为行方向 */
  3.   flex-direction: row;
  4.   /* 主轴方向为列方向 */
  5.   flex-direction: column;
  6. }

项目在主轴上是否允许换行 flex-wrap:wrap/nowrap;

  1. .container {
  2.   /* 允许换行 */
  3.   flex-wrap: wrap;
  4.   /* 不换行,默认 压缩子元素空间*/
  5.   flex-wrap: nowrap;
  6. }

主轴方向和是否允许换行简写

  1. .container {
  2.   /* flex-flow:flex-direction flex-wrap; */
  3.   flex-flow: row nowrap;
  4. }

剩余空间如何分配 place-content: ;

  1. .container {
  2.   /* 一、将所有项目看成一个整体,将剩余空间在所有项目两边进行分配 */
  3.   /* 1.默认值:将剩余空间放在所有项目右边,所有项目从左边开始排列 */
  4.   place-content: start;
  5.   /* 2.将剩余空间放在所有项目左边,所有项目从右边开始排列 */
  6.   place-content: end;
  7.   /* 3.将剩余空间在项目两边平均分配 */
  8.   place-content: center;
  10.   /* 二、将所有项目看成独立的个体,将剩余空间在所有项目之间进行分配 */
  11.   /* 1.两端对齐 */
  12.   place-content: space-between;
  13.   /* 2.分散对齐 */
  14.   place-content: space-around;
  15.   /* 3.平均对齐 */
  16.   place-content: space-evenly;
  17. }

项目在交叉轴上的对齐 place-items: ;

  1. .container {
  2.   /* 1.默认值:自动伸展 */
  3.   place-items: stretch;
  4.   /* 2.上对齐 */
  5.   place-items: start;
  6.   /* 3.下对齐 */
  7.   place-items: end;
  8. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body * {
  15.         outline: 1px dashed red;
  16.       }
  18.       body .container {
  19.         height: 20em;
  20.         /* 改变为弹性盒子 */
  21.         display: flex;
  22.         border: 1px solid;
  24.         /* 一、主轴方向 */
  25.         /* 主轴方向为行方向 */
  26.         /* flex-direction: row; */
  27.         /* 主轴方向为列方向 */
  28.         /* flex-direction: column; */
  30.         /* 二、是否允许换行 */
  31.         /* flex-wrap: wrap; */
  32.         /* flex-wrap: nowrap; */
  34.         /* 三、主轴方向和允许换行 */
  35.         /* flex-flow: row nowrap; */
  37.         /* 四、剩余空间的分配 */
  38.         /* place-content: start; */
  39.         /* place-content: end; */
  40.         /* place-content: center; */
  41.         /* place-content: space-between; */
  42.         /* place-content: space-around; */
  43.         /* place-content: space-evenly; */
  45.         /* 五、交叉轴对齐 */
  46.         /* place-items: stretch; */
  47.         /* place-items: start; */
  48.         /* place-items: end; */
  49.       }
  50.       body .container .item {
  51.         width: 10em;
  52.         text-align: center;
  53.       }
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <div class="container">
  58.       <div class="item">item1</div>
  59.       <div class="item">item2</div>
  60.       <div class="item">item3</div>
  61.     </div>
  62.   </body>
  63. </html>

项目常用属性

1.flex : 放大因子 收缩因子 计算宽度;

  1. .container > .item{
  2.      flex:0 1 auto; /* 默认值 */
  3.      /* 替代语法 */
  4.      flex:initial;
  5.     /* 设置了项目宽度,所以auto直接引用width */
  6.     /* 如果在flex中自定义width,则flex.width>.item.width */
  7.     /* 如果设置了min-width,则它权重最大,min-width > flex.width > .item.width */
  9.     /* 完全响应式 : 允许放大 允许缩小 宽度自动 */
  10.     flex:1 1 auto;
  11.     /* 替代语法 */
  12.     flex:auto;
  14.     /* pc布局 : 完全失去响应 禁止放大 禁止缩小  */
  15.     flex:0 0 auto;
  16.     /* 代替语法 */
  17.     flex:none;
  19.     flex:1; => flex:1 1 auto;
  20.     /* 如果省略第二、第三个值,则全取默认值 */
  21. }

2.order 可以改变项目在主轴上的排列顺序

  1. .container > .tiem:first-of-type {
  2.   order: 0; /*默认值*/
  3.   /* 值越小越靠前,值越大排列越往后,支持负数 */
  4. }

3.place-self 控制某一个项目在交叉轴的对齐

  1. .container > .tiem:first-of-type {
  2.   place-self: start;
  3. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>flex</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.       }
  14.       body * {
  15.         outline: 1px dashed red;
  16.       }
  17.       body .container {
  18.         height: 20em;
  19.         border: 1px solid;
  20.         display: flex;
  21.       }
  22.       body .container .item {
  23.         width: 10em;
  24.         /* flex: 1 1 auto; => flex: auto; */
  25.         /* flex: 0 1 auto; => flex: initial; */
  26.         /* flex: 0 0 auto; => flex: none; */
  27.         /* flex: 1 0 auto; => flex: 1*/
  28.       }
  29.       body .container .item:first-of-type {
  30.         /* order: -10; */
  31.         /* place-self: start; */
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="container">
  37.       <div class="item">item1</div>
  38.       <div class="item">item2</div>
  39.       <div class="item">item3</div>
  40.     </div>
  41.   </body>
  42. </html>
上一条：php运行原理下一条：vue组件注册及通信方式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议