弹性盒模型 怪异盒模型

怪异盒模型

    box-sizing: border-box;

• 怪异盒模型的border和padding是内嵌的，不增加盒模型面积
• 如果内部空间不够，会向外扩展

弹性盒模型 

声明要使用弹性盒模型 

display：flex / display:inline-flex

适用于父元素  

• display：flex 宽占满全屏
• display:inline-flex 宽高由子级内容撑开

排列顺序 flex-direction：；

• row 横向，左到右  flex-direction: reverse;
• row-reverse 反横向，右向左
• column 纵向，上到下
• row-reverse 反纵向，下到上

flex -wrap: wrap / nowrap ;是否换行

flex-flow  

• 复合属性，写在父级，作用于子级
• 先写排列方式，再写是否换行

•  flex-flow: row wrap;  横向排列 换行

justify-content: ; 

检索弹性盒子在主轴（X）方向上的对齐方式，写在父级

值：

• flex-start 左对齐
• flex-end 右对齐
• center 居中
• space-between 两端居左右，中间等间距
• space-around; （两端间距对齐） 两端间距和中间间距1:2

align-items 

检索盒子在Y轴方向的对齐方式，写在父级，作用于子级

属性值：

• flex-start 置顶
• flex-end 置底
• center 居中
• baseline 与基线对齐
• stretch 置顶+置底，高度收到min-height 与max-height制约

align-content 

检索换行的对齐方式 写在父级，作用于子级

值：

• flex-start 置顶
• flex-end 置底
• center 居中
• space-between 上下置顶、置底，中间居中
• space-around 纵向平分空间，各行居中显示
• stretch 纵向平分空间，各行以最大方式显示

order ：；设置排列顺序

     <li style="order: -1;">1</li>

写在子级，阿拉伯数字，值越小，排位越靠前

flex-grow ：； 分配剩余空间

写在子级，值是阿拉伯数字，值越大分配的空间越多

flex-shrink ：；

起效前提：子级长度之和大于父级，起效后，三者比例分配父级的宽度，即原定宽度不起作用了

写在子级，默认为1，用的没有flex-grow 多

flex-basis：；（有问题，大于时的具体的压缩比例还没有搞清楚）

定义宽度，占父级元素多少。父级宽度500，子级宽度100，一共5个，每一个此时占父级的20%。当对第一个子使用属性时，假设改为10%，则缩小一半，大于20%，会压缩周围的元素

flex符合属性

flex : none | flex-grow || flex -shrink || flext-basis