day22学习-弹性盒模型

 

一，怪异盒子

border-sizing:

  属性值：

box-sizing: content-box;常规盒模型

box-sizing: border-box;怪异盒模型（IE盒模型）

怪异盒模型：

  触发怪异盒模型：

      box-sizing :border-box;

  怪异盒模型特点：padding 和 border都会在元素的宽高的内部，不会把盒子撑大。

二，弹性盒模型

布局方案

   作用：控制离它最近的一层子元素，布局方式。

    特点：

    a:弹性盒子里面离它最近的一层子元素都可以添加大小。

   b：如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加 margin : auto;

   c:弹性盒子里面的子元素都沿着”主轴“排列

     ”主轴“:有可能是X轴也有可能是Y轴，如果X轴为主轴，Y轴就是侧轴。

默认情况下X是主轴。

  一：触发弹性盒子：

     display : flex;

二：改变主轴方向：

flex-direction:

    属性值：

     row （默认值 ：X轴为主轴）

     column(Y轴为主轴)

     column-reverse (以Y轴为主轴反向排列)

       row-reverse (以X轴为主轴反向排列)

三：改变主轴的对齐方式：

      justify-content:

      属性值：

    flex-start  默认状态：在弹性盒子开始的地方显示

    flex-end  在弹性盒子末端对齐

    center    居中对齐

     space-between  两端对齐

    space-around 自动分配间距

 

四：侧轴的对齐方式：

    align-items:

      flex-start  默认状态：在弹性盒子开始的地方显示

     flex-end  在弹性盒子末端对齐

    center    居中对齐

     baseline  基线（flex-start等效)

    stretch (默认值)    拉伸

五：控制弹性盒子里面的子元素（灵活元素）换行处理:

    flex-wrap:

         wrap 换行

         nowrap  不换行

      wrap-reverse  反向换行

六：控制行与行的对齐方式：

    align-content:

    flex-start  默认状态：在弹性盒子开始的地方显示

     flex-end  在弹性盒子末端对齐

     center    居中对齐

     space-between 两端对齐

      space-around 自动分配间距

七：补充： flex-direction 和 flex-wrap简写：

   flex-flow:;

以上属性应全部添加在父元素弹性盒子上面

添加在子元素上面的属性:

一：弹性盒子里面 某个灵活元素在侧轴的对齐方式。

align-self:

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

stretch    元素被拉伸以适应容器

center     元素位于容器的中心

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

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

二:控制子元素的排列顺序：

order:数值越大越往后排列，支持负数。

三：剩余空间的分配：

flex :1;分配主轴剩余空间

注：

flex :1;简写形式

   flex-grow:；扩展的量

   flex-shrink:;收缩的量

    flex-basis:; 元素的大小

flex-shrink :0;不压缩

一，多列

多列属性：

  1：列数：
        column-count:;

    2:列间距：
        column-gap:;

    3:列分割线：
        column-rule:

    4:控制每一列的列的高度是否统一：
        column-fill:;
            auto     列高度自适应内容
            balance  有列的高度以其中最高的一列统一

    5:跨列：
        column-span:all;

    6:列宽
        column-width: 

    7:columns: 7
        column-count 和 column-width  简写