怪异盒模型和flexbox弹性盒布局

怪异盒模型box-sizing

content-box

        这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

border-box

    为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

FLEXBOX布局(弹性盒)

一、伸缩布局盒模型(弹性盒模型)   

  

css3引入一种新的布局模式——flexbox布局，即伸缩布局盒模型，用来提供一个更有效的方式制定、调整和分布一个容器里的子项目布局，即使他们的大小是未知或者动态的。

主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。flex容器会使子项目扩展来填充

可用空间，或缩小他们以防止溢出容器。

Flex容器：采用 Flex 布局的元素的父元素；

Flex项目：采用 Flex 布局的元素的父元素的子元素；

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴(侧轴)（cross axis）,两根轴永远垂直。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

子项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器---子项目

flexbox布局功能主要具有以下几点：

1、屏幕和浏览器窗口大小发生变化也可以灵活调整布局；

2、指定伸缩项目沿着主轴或侧轴按比例分配额外空间，从而调增伸缩项目的大小；

3、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；

4、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；

5、控制元素在页面上的布局方向；

6、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

flexbox模型中的专业术语：

1、主轴和侧轴(交叉轴)

2、主/侧轴、侧/侧轴方向

3、主/侧轴起点、主/侧轴终点

4、主/侧轴长度

5、伸缩容器和伸缩项目

弹性盒模型的使用：

声明伸缩容器（父元素） 说明该内部为弹性盒布局，内部的元素默认全部在主轴方向一行显示，不会换行。

display：-webkit-flex；

display：-moz-flex；

display：-ms-flex；

display：-o-flex；

display：flex；

伸缩项目（子元素），每个子元素所占容器主轴方向大小的比份。

-webkit-flex:1;

-moz-flex:1;

-ms-flex:1;

-o-flex:1;

flex:1;

伸缩容器属性(父容器)：

1、display:flex 、inline-flex

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

1.display:flex;不会让容器本身取消它的块装的属性，但它的子元素会变成行内块的的属性。规定子项目在父元素主轴方向（默认水平）一行显示，不会换行。侧轴方向（默认垂直）会默认拉伸。使其变为弹性盒

2.display: inline-flex;父级是变成行内块元素，他的子元素也是行内块元素，并且自动换行

2、伸缩流方向flex-direction主要用来创建主轴，定义伸缩项目在伸缩容器中的方向

    row：从左向右

    row-reverse：与row相反；

    column：从上到下

    column-reverse：与column相反；

3、伸缩换行flex-wrap，定义子元素是否换行显示：

    nowrap不换行    默认值，不管超出还是不超出都不会换行

    wrap换行    一旦伸缩项目超出伸缩容器，那么就会换行

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

4、伸缩流方向与换行 flex-flow 

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap;

   flex-flow：flex-direction || flex-wrap

   两个值同时定义或者单独定义都生效

5、主轴对齐justify-content主要用来定义伸缩项目沿主轴线的对齐方式；

    flex-start：伸缩项目向主轴的起始位置靠齐；

    flex-end：伸缩项目向主轴的结束位置靠齐；

    center：伸缩项目向主轴的中间位置靠齐；

    space-between：伸缩项目会在主轴方向平分多余部分；

    space-around：伸缩项目会在主轴方向平分多余部分，两端保留一半的空间；

6、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式(单行)要写在父元素身上

    flex-start：伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边；(侧轴的起点位置摆放)

    flex-end：伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边；（侧轴的终点位置摆放）

    center：伸缩项目的外边距盒 在该行的侧轴上居中放置；（侧轴居中摆放）

    baseline：伸缩项目根据伸缩项目的基线对齐；（侧轴方向子项目以基线对齐）

    stretch：伸缩项目拉伸填充整个伸缩容器。默认值（伸缩项目不给高度时，默认会被拉伸。）

7、堆栈伸缩行align-content定义多个伸缩行在侧轴方向上的对齐方式；  往往要与换行同时应用

     align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用

    flex-start：各行向伸缩容器的起点位置堆叠；

    flex-end：各行向伸缩容器的结束位置堆叠；

    center：各行向伸缩容器的中间位置堆叠；

    space-between：各行在伸缩容器中平均分布；

    space-around：各行在伸缩容器中平均分布，两端保留一半的空间；

    stretch：各行将伸展以占用额外空间。

二、设置在子项目上：

1）设置子项目在父元素主轴方向的比份；

    语法：flex:number;

2）设置单个子项目在其所在行的侧轴对齐方式；

    语法：align-self：属性值；

    属性值：stretch 默认拉伸

            flex-start 子项目在其所在行的起始位置摆放

            flex-end 子项目在其所在行的结束位置摆放

            center 中间

3）设置子项目的顺序；

    语法：order:number;

    说明：写了order的排在没有order属性的元素后面。

         写了order的，属性值越小的在越前面； 

          没写order的属性值默认为零，order可以写负值。

4）设置子元素压缩；

    语法：flex-shrink: 0/1;

    属性值：0---不压缩；

            1---压缩；

伸缩项目属性：

1、显示顺序order默认状态是按照标准流的顺序排列，在flexbox模型里，可以通过order改变伸缩项目的顺序。

    不定义order的伸缩项目会排到前面。写了order的，属性值越小的在越前面。

说明：

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

    order：1； 排第一

    order：2； 排第二

2、伸缩性flex

    flex:2;

说明：

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

    详细属性值：

       「flex: 1」, 则其计算值为「1 1 0%」

        「flex: auto」, 则其计算值为「1 1 auto」

        「flex: none」, 则其计算值为「0 0 auto」

        「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

3、align-self：主要用来设置单独伸缩项目在侧轴的对齐方式，可以覆盖align-items。

Internet Explorer 和 Safari 浏览器不支持 align-self 属性

说明：

    align-self 属性规定灵活容器内被选中项目的对齐方式。

    注意：align-self 属性可重写灵活容器的 align-items 属性。

    属性值

        auto         默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

        Stretch        元素被拉伸以适应容器。

        Center        元素位于容器的中心。

        flex-start        元素位于容器的开头。

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

4、flex-xxx

flex-grow

    一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

flex-shrink

    一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

flex-basis

    项目的长度