博客列表 >1026作业

1026作业

P粉751989631
P粉751989631原创
2022年10月31日 23:50:04332浏览

实例演示flex容器与项目常用属性,并图示常用术语
Flex 布局(一维)
Flex 术语

  1. 1. flex 容器: `display: flex / inline-flex`
  2. 2. flex 项目: flex 容器的子元素(仅限子元素,可嵌套)
  3. 3. flex 主轴: 项目排列参考线
  4. 4. flex 交叉轴: 与主轴垂直的参考线
  5. 4_1.flex-flow: row nowrap(主轴方向与是否换行);
  6. 4_2.place-content: start(主轴排列与单行排列);
  7. 4_3.place-items: stretch(多行排列);
  8. > 主轴,交叉轴不可见, 仅供布局参考

Flex 属性

(一) 容器属性

  1. 1. `display`: 容器类型(块或行内)
  2. 2. `flex-flow`: 主轴方向与是否换行
  3. 3. `place-content`: 项目在"主轴"上的排列方式
  4. 4. `place-items`: 项目在"交叉轴"上的排列方式

(二) 项目属性

  1. 1. `flex`: 项目在"主轴"上的缩放比例与宽度
  2. 2. `place-self` 某项目在"交叉轴"上的排列方式
  3. 3. `order`: 项目在"主轴"上的排列顺序

排列顺序

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议