# vue-flex

**Repository Path**: itcheung_admin/vue-flex

## Basic Information

- **Project Name**: vue-flex
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-14
- **Last Updated**: 2025-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1. FlexContainer
   1. Width and Height ： Auto（default）: 根据子元素的内容来自动设置 ， Pixels:'10px' Percentage:'80%'
   2. Display：  Flex (default)：弹性布局， None：：该节点从布局树中删除并且不可见
   3. Flex Direction: Column (default), Row,Row reverse,Column reverse
   4. Justify Content ： Flex start (default) ， Flex end ，Center ，Space around，Space evenly
   5. alignContent ：Flex start (default) ， Flex end ,Stretch,Center,Space between,Space around ,Space evenly
   6. alignItems: Stretch (default),Flex start,Flex end,Center,Baseline
   7. flexWrap : No wrap (default) ， 'wrap' ， Wrap reverse
   8. Aspect Ratio: aspectRatio:1.0
   9. Flex Basis, Grow, and Shrink
   10. gap: 30  ,可以指定行的gap ,列的gap，或者同时gap
   11. 布局方向： Layout Direction   ， LTR (default) : ltr|rtl
   12. Min/Max Width and Height  ，


2. FlexItem
   1. alignSelf: 'center'
   2. Insets(偏移)， 相对于正常位置 ， top:, right, bottom, left
   3. Margin, Padding, and Border

3. zIndex
``` 
   const elements = [
    { id: 1, zIndex: 1, ...otherProps },
    { id: 2, zIndex: 2, ...otherProps },
    { id: 3, zIndex: 0, ...otherProps },
   ]
```


------------------------
1. 先写一个container, ，利用 provinder往下传，使得在item里面可以使用插入

-------------------------



长宽比
Aspect Ratio
Yoga 中的纵横比属性具有以下属性：

- 接受任何浮点值 > 0，默认未定义。
- 定义为节点的宽度和高度之间的比率，例如，如果节点的纵横比为 2，则其宽度是其高度的两倍。
- 尊重项目的最小和最大尺寸。
- 优先级高于flex grow
- 如果设置了纵横比的情况下，同时设置了宽高，则宽度尺寸将被覆盖。

例子
```
<Node style={{height: 50, aspectRatio: 1.5}} />
```



? 怎么实现层级嵌套



##### 发布
pnpm run build
pnpm run publish