弹性盒子（伸缩盒）的使用与介绍

伸缩盒的介绍

介绍

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

直接用

之前学的需要给浮动才可以让三个div在同一行

<div class="ssh">
    <div class="ssh1"></div>
    <div class="ssh2"></div>
    <div class="ssh3"></div>
</div>

添加弹性盒子直接display: flex;三个div就可在一排了

display:flex属性解释

新弹性盒子，设置父元素是一个弹性盒子，子元素就会自动水平排列
添加下面属性

justify-content;属性解释
横轴方向上的对齐方式

添加以一个居中对齐

justify-content:center;

justify-content的值

flex-start
flex-end
flex-cente
space-between
space-around

有水平的也就会有垂直的

alihn-items属性

stretch 默认值， 项目被拉伸以适应容器
center 项目位于容器的中心
flex-start 开头
flex-end 结尾

父元素折行属性

flex-wrap 属性

默认值 nowrap 不折行货列
wrap 必要的时候折行或列
wrap-reverse 同上，不过以想按顺序
inherit 继承父元素属性
initial 属性为他的默认值

子元素常用属性 flex-grow

flex-grow：number属性

可以进行一个布局的划分
直接用

 	    .ssh1{
            background: #f44336;
            flex-grow: 1;
        }
        .ssh2{
            background: #1E90FF;
            flex-grow: 3;
        }
        .ssh3{
            background: green;
            flex-grow: 6;
        }
}

运行结果

父元素垂直布局

flex-direction: column