3月30号一弹性盒模型的使用心得

学习测试感悟:
在audio中的autoplay自动播放。但谷歌默认禁止自动播放
1.新知识：弹性盒模型
1）原因：使得用户体验更加好，以及布局的整体效果随着用户的缩放来定
昵称：flex
2）概念：父元素（容器）
父元素：有两个轴（主轴和交叉轴）
3）设置格式：父级：display:flex;
4）主轴方向（决定元素的排布顺序）：
row默认值：左从到右
row-reverse右＿左
column上＿下
column-reverse下＿上
（注意：上下是宽度百分之百，左右是高度百分之百）
如何设置子元素换行：
5）flex-warp:warp;（给父级）
6）对齐格式：justify-content
间隔相等对齐：justify-content:space-around;
两端对齐：space-between
7）交叉轴：
排布方式：
align-items:center;中点对齐
～起点对齐：flex-start_{终点对齐：flex-end}基线对齐：baseline~auto占满整个高度～streth默认值
align-content：
取值：flex-start（元素位于容器的开头）～center（元素位于容器的中心）～streth～space-between space-around~flex-end
8）弹性因子：
增长因子：设置子元素的宽度，按比例分配剩下的宽度
flex-grow
弹性缩放因子：flex-shrink
9）子元素的大小属性：
复合属性：
flex-grow flex-shrink flex-basis
默认取值为：0 1 auto
其余取值：
auto自动计算值为1 1 auto
initial~0 1 auto
none~0 0 auto
inherit继承父元素属性
10）子元素的排布方式：order取值为整数
一次从小到大排列顺序（0为默认值）
ps:
弹性盒模型只会影响儿子，儿子从左到右排布，以及儿子不设置高度，则高度是父级的100%跟普通文档流不同（宽度是父级的100%）