弹性盒模型解析

弹性盒模型解析

一、什么是弹性盒模型

    1、弹性盒模型是一种更优秀的布局方式，使用弹性布局模式可    以控制子元素排列方式，不需要通过计算控制元素间隙。    2、弹性盒模型本质是通过两轴来控制的，一个是换行轴，一个    是排列方向，开启弹性模式以后称之为弹性容器，内外边距都可    以正常使用。

二、布局的默认方式

    1、display:block 默认是block-block 对外块元素对内块元素    2、display:inline 默认是inline-inline 对外是行内元素对内行内元素    3、display:inline-block 对外是行内元素对内是行内元素    4、display:flex 默认是display:block-flek 对外是块元素对内是弹性盒模型    5、display:inline-flek 对外是inline对内是弹性盒模型

三、弹性盒模型的特点

    1、默认从左往右排列    2、子元素有了弹性可以自动伸缩    3、默认不换行，因为换行需要手动控制

四、语法与取值(主轴)

    1、父级定义弹性盒模型容器 display:flex; 定义排列方向    (主轴)flex-direction:row(默认从左到右) row-reverse(从    右到左排列) culumn(排列从上到下) culumn-reverse(从下到    上排列)

五、换行方式(交叉轴 辅轴)

    1、默认是不换行，并且均分子元素宽高。    2、flex-warp:warp;(正常换行 向右 向下) flex-    warp:warp-reverse(反向换行 向上 向左) 默认nowrap不换行。

总结:

       1、不管任何时候，主轴永远垂直与交叉轴       2、flex-warp: 主轴 交叉轴;(是主轴与交叉轴的简写方式)       3、子元素不设置宽的时候由内容撑开       4、子元素不设置高的时候等比例填充       5、不设置宽高由内容撑开

六、(justify-centent)主轴的布方案

    1、just-centent:flex-start(默认 主轴的开始位置)     2、just-centent:flex-ent(主轴结束的位置)    3、just-centent:center(主轴元素居中排列)    4、just-centent:space-around(空白元素均分给子元素并且子元素空白是父元素的两倍)    5、just-centent:space-between(只有子元素有间距)    6、just-centent:space-evenly(父元素与之元素间距相等)

七、交叉轴的布局方案