之前布局一直用的是 position,float之类的,趁着国庆学习一下 flex 布局

父元素:

flex-direction: row row-reverse column column-reverse

1
2
3
flex-wrap: nowrap wrap wrap-reverse

1
2
3
4
5
6
7
8
9
10
11
12
13
flex-flow:
格式:flex-direction|| flex-wrap;
如: flex-flow: row wrap;
justify-content:
flex-start
flex-end
center
space-between
space-around

1
2
3

align-items:
flex-start
flex-end
center
baseline
stretch

1
2
3

align-content:
flex-start
flex-end
center
space-between
space-around
stretch

1
2
3
4
5
6
7
8
9
10
11
12
13

子元素:

order:
添加一个order在-5~5间的元素
重置

order:1

flex-grow:
使第一个元素的 flex-frow +1
重置

flex-grow:1
flex-grow:1
flex-grow:1

flex-shrink:(如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。)
改变第一个元素的 flex-shrink

flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1
flex-shrink:1

flex-basis:
改变第二个元素的flex-basis

1
flex-basis: auto

flex:
可以为 none 也可以是由flex-grow flex-shrink flex-basis这三个属性组合而成的;
当flex:auto时值为1 1 auto;
当flex:none时值为0 0 auto;
align-self:(单个项目的对齐方式,可覆盖align-items)
属性同 align-items 分为:auto | flex-start | flex-end | center | baseline | stretch;
除了auto效果完全相同

// order:1