弹性盒子布局知识

一、设置弹性盒子               

                给容器盒子/父级标签设置弹性盒子属性：display: flex;

                当子标签整体尺寸超过父级标签时 子标默认会缩小均分父级标签的控件

                父级标签没有高度塌陷的问题 

二、弹性盒子的排列方向 

                默认情况下  水平是主轴方向  垂直是交叉轴方向 

                主轴方向的排列方式 

                水平左对齐 ： justify-content: flex-start; 

                水平右对齐：  justify-content: flex-end; 

                水平居中对其 ：justify-content:center; 

                水平方向 两边贴齐 中间留边距 ：justify-content: space-between; 

                水平方向  中间的边距比两边的边距多一倍： justify-content:space-around; 

                水平方向 元素间距离平均分配： justify-content:space-evenly;

三、弹性盒子交叉轴对齐

                子元素交叉轴/垂直方向 上对齐：  align-items: flex-start; 

                垂直方向居中对齐：align-items:center; 

                垂直方向下对齐 ： align-items:flex-end; 

                子元素拉伸高度以适应父级标签的高度 注意子元素默认没有设置高度才有效果 

                align-items:stretch;

四、设置弹性盒子多行排列

        1、设置子元素换行/多行排列：flex-wrap: wrap;

                多行水平方向排列方式 

                justify-content: flex-start; 

                justify-content: flex-end;

                justify-content:center;

                justify-content:space-around;

                justify-content:space-between;

                justify-content:space-evenly;

        2、多行垂直方向/交叉轴排列 

                垂直上对齐：align-content:flex-start;

                垂直居中对齐：align-content:center;

                垂直下对齐：align-content:flex-end;

                垂直方向中间间距比两边多一倍：align-content:space-around;

                中间行留间距 两边行贴边：align-content:space-between;

                垂直方向 多行之间的间距相等：align-content:space-evenly;

五、弹性布局轴方向反转

                多行排列

                主轴元素排列顺序颠倒 

                交叉轴多行排列方向相反：flex-wrap:wrap-reverse;

                交叉轴 结束方向反转为上方向：align-content: flex-end;