search

博客列表 >flex常用属性和常用术语

flex常用属性和常用术语

手机用户1594223549
手机用户1594223549原创
2022年10月28日 01:17:23382浏览

一.flex容器与项目常用属性

1.输出成果

第一种：容器属性

（1） display: 容器类型(块或行内)

（2） flex-flow: 主轴方向与是否换行

行排列，不换行

行排列，换行

列排列，不换行

列排列，换行

（3）place-content: 项目在”主轴”上的排列方式

居左

居右

居中

两端对齐

分散对齐

平均对齐

(4)place-items: 项目在”交叉轴”上的排列方式

延伸

居上

居下

居中

第一种：容器属性

（1）flex: 项目在”主轴”上的缩放比例与宽度

默认状态(部分响应): 不放大,允许缩小,宽高自动

完全响应: 允许放大,允许缩小,宽高自动

完全不响应: 禁止放大,禁止缩小,宽高自动

有一个三列布局, 中间一列的宽度,是二边的3倍

（2）place-self:某项目在”交叉轴”上的排列方式

start

center

end

(3)order: 项目在”主轴”上的排列顺序

2.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="item">item1</div>
  12.         <div class="item">item2</div>
  13.         <div class="item">item3</div>
  14.     </div>
  15.     <style>
  16.         /* 1.容器属性 */
  17.         /* 1. `display`: 容器类型(块或行内)
  18.         2. `flex-flow`: 主轴方向与是否换行
  19.         3. `place-content`: 项目在"主轴"上的排列方式
  20.         4. `place-items`: 项目在"交叉轴"上的排列方式 */
  21.         .container {
  22.             width: 450px;
  23.             height: 50px;
  24.             /* （1）`display`: 容器类型(块或行内)*/
  25.             display: flex;
  27.             /* （2）`flex-flow`: 主轴方向与是否换行 */
  28.             /* 行排列，不换行 */
  29.             /* flex-flow: row nowrap; */
  31.             /* 行排列，换行 */
  32.             /* flex-flow: row wrap; */
  34.             /* 列排列，不换行 */
  35.             /* flex-flow: column nowrap;  */
  37.             /* 列排列，换行 */
  38.             /* flex-flow: column wrap;  */
  40.             /* （3）`place-content`: 项目在"主轴"上的排列方式 */
  41.             /* 居左 */
  42.             /* place-content: start; */
  44.             /* 居右 */
  45.             /* place-content: end; */
  47.             /* 居中 */
  48.             /* place-content: center; */
  50.             /* 两端对齐 */
  51.             /* place-content: space-between; */
  53.             /* 分散对齐 */
  54.             /* place-content: space-around; */
  56.             /* 平均对齐 */
  57.             /* place-content: space-evenly; */
  59.             /* (4)`place-items`: 项目在"交叉轴"上的排列方式  */
  61.             /* 延伸 */
  62.             /* place-items:stretch; */
  64.             /* 居上 */
  65.             /* place-items: start; */
  67.             /* 居下 */
  68.             /* place-items: end; */
  70.             /* 居中 */
  71.             /* place-items: center; */
  72.         }
  74.         /* 2.项目属性 */
  75.         /* 1. `flex`: 项目在"主轴"上的缩放比例与宽度
  76.         2. `place-self`:某项目在"交叉轴"上的排列方式
  77.         3. `order`: 项目在"主轴"上的排列顺序 */
  79.         .container > .item {
  80.             background-color: lightblue;
  81.         /* (1)`flex`: 项目在"主轴"上的缩放比例与宽度 */
  83.         /* 默认状态(部分响应): 不放大,允许缩小,宽高自动 */
  84.         /* flex: 0 1 auto; */
  85.         /* flex: initial; */
  87.         /* 完全响应: 允许放大,允许缩小,宽高自动 */
  88.         /* /* flex: 1 1 auto; */
  89.         /* flex:auto; */ 
  91.         /* 完全不响应: 禁止放大,禁止缩小,宽高自动 */
  92.         /* flex: 0 0 auto; */
  93.         /* flex: none; */
  94.         }
  96.         /* 例如, 有一个三列布局, 中间一列的宽度,是二边的3倍 */
  97.         /* .container .item:first-of-type,
  98.         .container .item:last-of-type {
  99.             flex: 1;
  100.             background-color: green;
  101.         }
  102.         .container .item:first-of-type + * {
  103.             background-color: yellow;
  104.             flex: 3;
  105.         } */
  107.         /* (2)`place-self`:某项目在"交叉轴"上的排列方式 */
  108.         /* .container .item:first-of-type,
  109.         .container .item:last-of-type {
  110.             flex: 1;
  111.             background-color: green;
  112.         }
  113.         .container .item:first-of-type + * {
  114.             background-color: yellow;
  115.             flex: 3;
  116.             place-self: end;
  117.         } */
  119.         /* (3)`order`: 项目在"主轴"上的排列顺序  */
  120.          /* 第一个 */
  121.       .container .item:first-of-type {
  122.         order: -1;
  123.         background-color: greenyellow;
  124.       }
  125.       /* 第二个 */
  126.       .container .item:first-of-type + * {
  127.         order: 3;
  128.       }
  129.       /* 第三个 */
  130.       .container .item:last-of-type {
  131.         order: 0;
  132.       }
  133.     </style> 
  134. </body>
  135. </html>

二.flex常用术语

1.常用术语

（1）flex 容器: display: flex / inline-flex
（2） flex 项目: flex 容器的子元素(仅限子元素,可嵌套)
（3） flex 主轴: 项目排列参考线
（4） flex 交叉轴: 与主轴垂直的参考线
主轴,交叉轴不可见, 仅供布局参考

2.图解术语

上一条："class"使用图标以及媒体查询原理下一条：前端开发时推荐用rem做单位
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多