***点击属性,动态查看布局效果
博客地址:https://blog.csdn.net/heroboyluck/article/details/83065323
github:https://github.com/ngd-b/FlexLayout
容器的属性:
- row
- row-reverse
- column
- column-reverse
flex-flow是flex-direction/flex-wrap两个属性的简写.
- flex-start
- flex-end
- center
- space-between
- space-around
- flex-start
- flex-end
- center
- baseline
- stretch
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
项目的属性
定义项目的排列顺序,默认0,数值越小月靠前。
1-order:默认
2-order:默认
3-order:默认
1-order:默认
2-order:-1
3-order:默认
1-order:2
2-order:-1
3-order:默认
定义项目的放大比例,默认0不放大。
定义项目的缩小比例,即空间不足时缩小。默认1缩小,为0时不缩小。
1:默认
2:默认
3:默认
4:默认
5:默认
6:默认
定义属性在分配多余空间之前,项目占据的主轴空间。默认auto即原本的大小。
1:500px;
2:auto
3:1000px;
** 超过主轴空间大小,则按比例分配。
flex是flex-grow/flex-shrink/flex-basis三个属性的简写.
auto、flex-start、felx-end、center、baseline、stretch