***点击属性，动态查看布局效果

博客地址：https://blog.csdn.net/heroboyluck/article/details/83065323

github：https://github.com/ngd-b/FlexLayout

容器的属性：

  • row
  • row-reverse
  • column
  • column-reverse
1
2
3
  • nowrap
  • wrap
  • wrap-reverse
1
2
3
4
5
6

flex-flow是flex-direction/flex-wrap两个属性的简写.

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
1
2
3
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
1
2
3
  • 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：默认
2：默认
3：默认
1：默认
2:1
3：默认
1:1
2:1
3:1
1:1
2:2
3:1

定义项目的缩小比例，即空间不足时缩小。默认1缩小，为0时不缩小。

1：默认
2：默认
3：默认
4：默认
5：默认
6：默认
1:0
2：1
3：0
4：1
5：0
6：1

定义属性在分配多余空间之前，项目占据的主轴空间。默认auto即原本的大小。

1：默认
2：默认
3：默认
1:500px;
2:auto
3：1000px;

** 超过主轴空间大小，则按比例分配。

flex是flex-grow/flex-shrink/flex-basis三个属性的简写.

auto、flex-start、felx-end、center、baseline、stretch

1
2
3
4
5
6