CSS3弹性盒

1.怪异盒模型

---

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

       box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

        content-box(按标准盒模型的规则解析)这是由CSS2.1 规定的宽度高度行为。

                   宽度和高度分别应用到元素的内容框。

                   在宽度和高度之外绘制元素的内边距和边框。

         border-box(按怪异盒模型的规则解析)为元素设定的宽度和高度决定了元素的边框盒。

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

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

2.弹性盒模型

---

• 弹性父元素设置

弹性盒是一种新的布局形式，可以决定弹性子元素的显示效果，可以自动设置弹性子元素中间的空隙，还能实现弹性子元素随着父元素的变大而变大，缩小而缩小

弹性盒里包含弹性子元素

1.将盒子设置为弹性盒 display:flex;

2.弹性子元素的排列方式 flex-direction

Row 默认值 自左向右

Row-reverse  自左向右的翻转

Column  自上而下

Column-reverse  自上而下的翻转

3.弹性子元素的主轴对齐方式justify-content

Flex-start  左  上

Flex-end   右   下

Center     居中

Space-between  两端对齐

Space-around    中间是两端的倍数

Space-evenly    所有空隙都一样 平均分配

那个方向是主轴取决于弹性子元素的排列方式：如果是自左向右排列x轴为主轴

如果是自上而下排列y轴为主轴

4.弹性子元素侧轴对齐方式align-items

Stretch：弹性子元素的高度与父元素的高度一样（如果子元素不设置高度默认就是一样）

Flex-start：  竖着排列 上   横着排列  左

Flex-end     竖着排列  下   横着排列  右

Center    居中

Baseline   基线对齐

5.是否允许弹性子元素换行属性flex-wrap

如果弹性子元素的总宽度超过弹性父元素的总宽度时，弹性子元素默认情况下不会换行显示，或缩小弹性子元素的宽度，缩小到只能放下弹性子元素内容的宽度，次数如何还有超出，会显示溢出效果，也不会换行显示

Nowrap：默认值 不允许换行

Wrap：允许换行

Wrap-reverse：允许换行并行翻转

6.弹性子元素行的控制属性align-content

注意：只有弹性子元素存在换行属性时此属性才能生效

Flex-start 上

Flex-end 下

Center 居中

Space-between 两端

Space-around  中间是两端的倍数

Space-evenly  平均分配

弹性子元素设置

设置弹性子元素的显示顺序 order  默认值0值越小越靠前显示   可以设置为负值

设置弹性子元素的宽度 flex-basis 相当于width  默认值auto

平分父元素剩余的空间flex-grow   默认值0

是否允许弹性子元素进行收缩 flex-shrink  默认值1 允许  0不允许

平均分配弹性父元素  设置弹性子元素所占份数flex

设置弹性子元素单个的对齐方式 align-self

Baseline  基线

Stretch  和父元素的高度一样

Center  居中

Flex-start 上  左

Flex-end  下  右