CSS弹性盒子！及其属性！

怪异盒模型

 

 box-sizing：用来设置盒模型的解析规则

允许以特定的方式定义匹配某个区域的特定元素

                        border-box;(按怪异盒模型的规则解析)

                        为元素设定的宽度和高度决定了元素的边框盒。

                        就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

                        通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

弹性布局用为盒状模型提供最大的灵活性。(Flexible Box)--(Flex )

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

display:flex; 将对象作为弹性伸缩盒显示

            inline-flex;将对象作为内联块级弹性伸缩盒显示

2、 主轴排列方向（顺序指定了弹性子元素在父容器中的位置）

flex-direction:  row ; 默认横向一行排列（左对齐）

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

                        column; 纵向排列。

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

3、主轴对齐方式（应用在弹性容器上，控制伸缩项目在伸缩容器中的主轴对齐方式）写在父元素上

justify-content: flex-start;默认值，主轴顶端对齐

                        flex-end;主轴末端对齐

                        center;主轴居中对齐

                        space-between;在主轴两端对齐，中间自动分配

                        space-around;在主轴自动分配空白空间

                        space-evenly;平均分配空白空间

4、侧轴对齐方式（控制伸缩项目在伸缩容器中的侧轴对齐方式）

align-items:     flex-start：弹性盒子元素在伸缩容器里延侧轴顶端对齐。

                        flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐。

                        center：弹性盒子元素在伸缩容器里延侧轴居中对齐。

                        baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐。

                        stretch：默认值。项目未设置侧轴的尺寸时拉伸成容器的侧轴尺寸。

5、规定灵活容器内被选中项目的侧轴对齐方式（可重写灵活容器的 align-items 属性）

align-self：      auto; 默认,继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。

(给子元素)       Stretch; 元素被拉伸以适应容器侧轴的尺寸。

                        Center; 元素位于容器侧轴的中心。

                        flex-start 元素位于容器的侧轴顶端。

                        flex-end 元素位于容器侧轴的末端

6、当内容超出容器的尺寸时是否换行，同时侧轴的方向决定了新行堆叠的方向。

flex-wrap: nowrap;不换行

                wrap;换行

                wrap-reverse;反转换行排列。

7、行与行之间对齐方式（侧轴还有多余空间时,可以用来调整「伸缩行」在伸缩容器里的对齐方式）

align-content： stretch; 默认值。行和行补强制拉伸以适应容器侧轴的长度。

                        flex-start；行和行在侧轴顶端对齐，没有行间距

                        flex-end；行和行在侧轴顶端对末端对齐，没有行间距

                        center；行和行在侧轴居中对齐，没有行间距

                        space-between；行和行两端对齐，中间自动分配侧轴剩余空间。

                        space-around；行和行自动分配侧轴剩余空间。

                        space-evenly；平均分配空白空间

8、flex三个子属性介绍

flex-grow

定义项目的放大比例，默认为0（如果存在剩余空间也不放大）

flex-shrink

定义了项目的收缩比例，默认为1（如果空间不足该项目将缩小）负值对该属性无效。

收缩量的计算方式：（元素宽度*收缩比例/元素*收比例 相加）*溢出宽度

flex-basis

项目的主轴方向的长度

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

flex:flex-grow,flex-shrink,flex-basis;

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

                1、可以拉伸块，填满剩余空间

                 2、若无剩余空间，则会压缩块，不会换行，flex-wrap也无效

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

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

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

9、控制伸缩项目的显示顺序

order: 默认为0，支持负数，没有单位的整数值，数字越大越往后排，。

10、flex-flow：是flex-direction属性和flex-wrap属性的简写形式

默认值为row nowrap;