1.官方文档

目录

一.布局基础

1.flex的容器元素

2.flex容器属性

2.1flex-direction

2.2flex-wrap

2.3justify-content

2.4align-items

3.flex元素属性

3.1flex-grow

3.2flex-shrink

3.3flex-basis

3.4flex

3.5order

3.6align-self

4.相对布局

5.绝对布局

一.布局基础

2.flex布局(display:flex)

1.flex的容器元素

3.

2.flex容器属性属性名称作用取值flex-direction决定元素的排列方向colum、row(默认)flex-wrap决定元素如何换行(排列不下时候)warp、nowarp(默认)、warp-reverseflex-flowflex-direction和flex-wrap的简写略justify-content元素在主轴上的对齐方式center、flex-start、flex-end、space-around、space-between......align-items元素在交叉轴上的对齐方式

4.flex-start(默认)、flex-end、center、stretch、baseline......

5.TIPS：

6.flex-direction决定了主轴和交叉轴，colum→从上到下是主轴；row→从左到右是主轴

7.flex-flow是简写，属性值中间用空格连接

8.效果图：

2.1flex-directiondisplay:flex;flex-direction:row;

9.

display:flex;flex-direction:column;

10.

2.2flex-wrapdisplay:flex;flex-wrap:wrap;

11.

display:flex;flex-wrap:nowrap;

12.

display:flex;flex-wrap:wrap-reverse;

13.

2.3justify-contentdisplay:flex;justify-content:center;

14.

display:flex;justify-content:flex-end;

15.

display:flex;justify-content:flex-start;

16.

display:flex;justify-content:space-around;

17.

display:flex;justify-content:space-between;

18.

2.4align-itemsdisplay:flex;justify-content:space-between;align-items:flex-start;

19.

display:flex;justify-content:space-between;align-items:flex-end;

20.

//以第一行文字对齐,给第三个小方块加了特效display:flex;justify-content:space-between;align-items:baseline;

21.

22.此时再将align-items设为flex-start，可以清晰的观察出其本质区别

23.

3.flex元素属性属性名称作用取值flex-grow当有多余空间时，元素的放大比例0(默认)...其余数值(放大倍数)flex-shrink当空间不足时，元素的缩小比例1(默认)...其余数值(缩小倍数)flex-basis元素在主轴上占据的空间数值,单位pxflexgrow、shrink、basis的简写略order定义元素的排列顺序1234...顺序数值align-self定于元素自身的对齐方式flex-start、flex-end、center3.1flex-growflex-grow:1;

24.

.item{flex-grow:1;}.item2{flex-grow:2;}

25.

3.2flex-shrinkflex-shrink:1;

26.

.item{flex-shrink:1;}.item2{flex-shrink:0;}

27.

3.3flex-basisflex-basis:200px;

28.

3.4flexflex:1150px;

29.

3.5orderviewclass='container'viewclass='item'style='order:2'1/viewviewclass='item'style='order:3'2/viewviewclass='item'style='order:4'3/viewviewclass='item'style='order:1'4/view/view

30.

3.6align-self.container{...align-items:flex-start;}.item{...}.item2{align-self:flex-end;}

31.

4.相对布局

32.精髓：相对定位的元素是相对自身进行定位的，参照物是自己

/*为第二个元素设置了特殊样式*/position:relative;left:50rpx;top:70rpx;5.绝对布局

33.精髓：绝对定位的元素是相对离它自己的一个已定位的父级元素定位的

/*为第二个元素设置了特殊样式*/position:absolute;left:50rpx;top:70rpx;viewclass='container'viewclass='item'1/viewviewclass='item2'2/viewviewclass='item'3/viewviewclass='item'4/view/view//!!!当父级元素也没有定位，就以整个页面为参照

34.

/*当父级元素已经定位了*/.container{position:absolute;left:80rpx;top:100rpx}/*为第二个元素设置了特殊样式*/.item2{position:absolute;left:50rpx;top:70rpx;}

35.

36.谢谢浏览，如有错误烦请指正，喵喵喵~(≧∀≦)ゞ