Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex常用属性和常用术语
Blogger Information
Blog 28
fans 0
comment 0
visits 13061
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常用属性和常用术语
手机用户1594223549
Original
385 people have browsed it

一.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.图解术语

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：不错，总结的很详细
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