css相关——盒模型、弹性盒

盒模型（box-sizing属性）

盒模型尺寸基准有两种，分别是默认的content-box（标准盒模型）（默认）和border-box（怪异盒模型）

        content-box: width/height = content（内容区）

        border-box：width/height = content（内容区） + padding（内边距） + border（边框）

---

弹性布局（flex布局）

定义在父元素上

1、display:flex

        设置为弹性盒（父元素添加）

2、flex-direction (主轴排列方向)

        row:  横向排列（默认值）

        column：纵向排列

（以下两个不常用：）

        row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。      

        column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

3、justify-content(主轴对齐方式)

        flex-start默认，顶端对齐

        flex-end末端对齐     

        center居中对齐   

        space-between两端对齐，中间自动分配     

        space-around自动分配距离

4、align-items（侧轴对齐方式）

        flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。  

        flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。  

        center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。  

        baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

5、flex-wrap(控制flex容器是否换行/列、根据主轴方向决定)

        nowrap：默认值。不换行/列

        wrap：换行/列

        wrap-reverse：换行/列，但是以相反的顺序。

6、align-content（多根轴线的对齐方式）

        stretch（默认）元素被拉伸以适应容器。

        flex-start没有行间距

        flex-end底对齐没有行间距

        center居中没有行间距

        space-between两端对齐，中间自动分配

        space-around自动分配距离

7、flex-flow        

        flex-flow:row nowrap；（默认值，flex-direction flex-wrap简写形式）

定义在子元素上

1、align-self（允许单个项目有与其他项目不一样的对齐方式）

        auto(默认) 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

        flex-start

        flex-end

        center

        baseline

        stretch

        IE 和Safari 浏览器不支持 align-self 属性。

2、order（定义项目的排列顺序。数值越小，排列越靠前，默认为0）

3、flex-grow（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。）

4、flex-shrink（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）

5、flex-basis（定义了在分配多余空间之前，项目占据的主轴空间，默认为auto）

6、flex（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto）

        auto (1 1 auto)

        none (0 0 auto)

        1(1 1 0%)