怪异盒模型&flex布局

怪异盒模型=CSS3盒模型：

怪异盒模型也叫弹性盒模型 / 伸缩布局盒模型；

css盒模型width不变=width-左右margin-左右padding 【padding值往外加】；

怪异盒模型width=width（包含border+padding）【padding值往里挤】；

盒模型转换：

box-sizing=border-box；转换为怪异盒模型；

！注意 ！

1. 左右间距若margin和padding都能实现，最好padding，上下间距用margin和padding都可；
2. 谁超出给定的宽度，则box-sizing=border-box就加给谁；

flex容器的属性：

      1、display：flex / inline-flex

当设为flex布局后，float、clear、vertical-align属性失效；只能给父级添加，无继承性

       2、flex-direction 主轴方向

模型的长度称为主轴；模型的高度称为侧轴；

flex-direction：row从左向右，默认值  /  row-reverse与row相反  /   column从上到下  / 

                         column-reverse 与column相反；

        3、flex-wrap 是否换行属性

flex-wrap：nowrap；  不换行，默认值    不管超没超出都不会换行；

flex-wrap：wrap；  换行，一旦伸缩项目超出伸缩容器，就会换行；

注：只有伸缩项目大于伸缩容器时，才会换行，否则无效；

flex-wrap：wrap-reverse；  换行反向，主轴水平时，上下反向；主轴垂直时，左右反向；

        4、flex-flow  简写

是flex-direction属性和flex-wrap属性的简写，默认值为row nowrap；

         5、justify-content   主轴的对齐方式

justify-content：flex-start；伸缩项目向一行的起始位置靠齐；

justify-conten：flex-end；伸缩项目向一行的结束位置靠齐；

justify-content：center； 伸缩项目向一行的中间位置靠齐；

justify-conten：space-between； 伸缩项目会平均的分布在行内；

justify-conten：space-around；伸缩项目会平均的分布在行内，并在两端保留一半的空间；

          6、align-items  交叉轴上的对齐方式

flex项目属性：

             1、align-self属性

auto  默认值，元素继承他父容器的align-items属性。如果没有父容器则为“stretch”；

stretch  元素被拉伸以适应容器；

center   元素位于容器中心；

flex-start  元素位于容器开头；

flex-end   元素位于容器的结尾；

             2、order

排序优先级，数字越大越往后排，默认为0，支持负数；

             3、flex

设置或检索弹性盒模型对象的子元素如何分配空间；

flex：1   

 

前缀的添加位置：给新增的属性or新增的属性值加；