弹性盒

css 弹性盒子200304_css

css 弹性盒子200304_默认值_02

主轴 侧轴

css 弹性盒子200304_css_03

css 弹性盒子200304_css_04

css 弹性盒子200304_css_05

css 弹性盒子200304_默认值_06

display: flex|inline-flex

css 弹性盒子200304_css_07

例子

弹性盒子 display:flex

效果相当于让子元素浮动并且让父元素清除了浮动
css 弹性盒子200304_css_08

css 弹性盒子200304_css_09

inline-flex的效果

宽度由内容的宽度决定，不再是横向最大的了

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

css 弹性盒子200304_css_10

display:flex

相当于左浮动
css 弹性盒子200304_默认值_11

fiex-direction:row-reverse

相当于右浮动

css 弹性盒子200304_默认值_12

把普通盒子变成弹性盒子

css 弹性盒子200304_默认值_13

控制盒子的方向

css 弹性盒子200304_css_14

控制超出是否换行

css 弹性盒子200304_css_15

css 弹性盒子200304_css_16

css 弹性盒子200304_默认值_17

css 弹性盒子200304_默认值_18

盒子对齐方式

css 弹性盒子200304_默认值_19

css 弹性盒子200304_默认值_20

css 弹性盒子200304_css_21

css 弹性盒子200304_默认值_22

align-items

css 弹性盒子200304_css_23

默认值

css 弹性盒子200304_css_24

子容器有高度显示自己的
没有高度和弹性 盒子的一样

flex-end效果

css 弹性盒子200304_css_25

flex-center效果

css 弹性盒子200304_css_26

baseline效果

css 弹性盒子200304_css_27

stretch效果
css 弹性盒子200304_css_28

align-content

css 弹性盒子200304_css_29

css 弹性盒子200304_默认值_30
css 弹性盒子200304_css_31

css 弹性盒子200304_css_32

css 弹性盒子200304_默认值_33

css 弹性盒子200304_css_34

写在子元素内的属性 ===》

flex-grow
css 弹性盒子200304_css_35

子元素分配了 flex-grow 以后

css 弹性盒子200304_css_36

css 弹性盒子200304_默认值_37

多出的空间被分配

当前例子会以1比1的比例进行分配

默认情况下flex-grow值为0，表示不分配

flex-shrink

css 弹性盒子200304_默认值_38

eg

css 弹性盒子200304_css_39

css 弹性盒子200304_css_40

css 弹性盒子200304_css_41

压缩方法计算公式

css 弹性盒子200304_默认值_42

css 弹性盒子200304_默认值_43

flex-basis

css 弹性盒子200304_默认值_44

flex复合属性

css 弹性盒子200304_默认值_45

order

css 弹性盒子200304_默认值_46

align-self

css 弹性盒子200304_默认值_47

css 弹性盒子200304_默认值_48

css 弹性盒子200304_默认值_49

案例，圣杯布局

css 弹性盒子200304_css_50

css 弹性盒子200304_css_51

css 弹性盒子200304_css_52