FlexBox 弹性盒模型布局 - 子控件篇

上一章讲了下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> 用百分比来定义宽度 不允许负值

Flex-Basis Demo

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'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

Align-Self Demo

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] 定义弹性盒子元素的默认基准值

Flex Demo