弹性盒模型解析

63次阅读

共计 997 个字符，预计需要花费 3 分钟才能阅读完成。

一、什么是弹性盒模型

    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(父元素与之元素间距相等)