弹性盒:是css3新增加的一种布局形式,目的是当页面在不同的屏幕尺寸上去显示时,使元素拥有恰当的显示效果
弹性盒有两部分组成:弹性容器及弹性子元素
弹性父元素:
弹性容器设置:display:flex;
弹性子元素在主轴上的对齐方式:justify-content:flex-start\center\flex-end\space-between\space-around(如果子元素自左向右排列,主轴是x,自上而下时主轴是y)
弹性子元素的排列方式:flex-direction:
弹性子元素在侧轴上的对齐方式:align-items
弹性子元素是否允许换行显示:flex-wrap:nowrap(默认值)
弹性子元素行的设置align-content(必须与flex-wrap连用)
弹性子元素:
弹性子元素在父元素中所占分数flex
弹性子元素占剩余空间的分数flex-grow
弹性子元素的宽度 flex-basis 相当于width
弹性子元素的缩放flex-shrink 默认为1允许 0 不允许
弹性子元素的排列顺序order 值越小与靠前(可以设置为负值)
单独设置弹性子元素align-self: