上一章讲了下FlexBox的基础以及父控件css的控制其实父控件大体上就是一个排列方向和对齐方式的作用。子控件会根据父控件的main-size和控制来布局。
flex-grow (适用于弹性盒模型容器子元素)
定义设置或检索弹性盒的拓展比率
根据弹性盒子元素所设置的拓展因子作为比率来分配剩余空间
flex-grow: <number> (default 0)
- <number>：用数值来定义扩展比率。不允许负值
- flex-grow的默认值为0，如果没有显示定义该属性，是不会拥有分配剩余空间权利的。
Flex-Grow Demo
flex-shrink(适用于弹性盒模型容器子元素)
定义： 设置或检索弹性的收缩比率(根据弹性盒子元素所设置的搜索因子作为比率来收缩空间)
flex-shrink: <number> (default 1)
- flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
Flex-Shrink Demo
flex-basis (适用于弹性盒模型容器子元素)
定义 设置或检索弹性盒伸缩基准值
flex-basis :<length>|auto(default auto)
- auto 无特定宽度值取决于其他属性值
- <length> 用长度值来定义宽度 不允许负值
- <percentage> 用百分比来定义宽度 不允许负值
align-self(适用于弹性盒模型子元素)
定义:设置或者检索弹性盒子元素自身在侧轴(纵轴)方向上的对齐方式
aligin-self:auto | flex-start | flex-end| center | baseline | stretch
- auto 如果"align-self"的值为auto 则其计算值为元素的父元素的"align-items"的值 如果其没有父元素 则计算值为stretch
- felx-start 弹性盒子元素的侧轴(纵轴)其实位置的边界紧靠住该行的侧轴起始边界
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
flex (适用于弹性盒模型子元素)
复合属性设置或检索伸缩盒对象的子元素如何分配空间
flex：none | [ flex-grow(默认为0) ] || [ flex-shrink ](默认为1) || [ flex-basis(默认为0)) ]
- 如果缩写flex:1 则其计算值为 1 1 0
- none:none关键字的计算值为 0 0 auto
- [flex-grow] 定义弹性盒子元素的拓展比率
- [flex-shrink] 定义弹性盒子元素的收缩比率
- [felx-basis] 定义弹性盒子元素的默认基准值
